feat(stage-ui|stage-tamagotchi|stage-web): ollama, header & values

2025-03-16 21:56:57 +08:00
parent e466a7afe8
commit 7358023bbb
28 changed files with 577 additions and 743 deletions
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { RemovableRef } from '@vueuse/core'
+
+import {
+  FieldKeyValues,
+  ProviderAdvancedSettings,
+  ProviderBaseUrlInput,
+  ProviderBasicSettings,
+  ProviderSettingsContainer,
+  ProviderSettingsLayout,
+} from '@proj-airi/stage-ui/components'
+import { useProvidersStore } from '@proj-airi/stage-ui/stores'
+import { storeToRefs } from 'pinia'
+import { computed, onMounted, reactive, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const providersStore = useProvidersStore()
+const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
+
+// Get provider metadata
+const providerId = 'ollama'
+const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
+
+const baseUrl = computed({
+  get: () => providers.value[providerId]?.baseUrl || providerMetadata.value?.defaultOptions?.baseUrl || '',
+  set: (value) => {
+    if (!providers.value[providerId])
+      providers.value[providerId] = {}
+
+    providers.value[providerId].baseUrl = value
+  },
+})
+
+onMounted(() => {
+  providersStore.initializeProvider(providerId)
+
+  // Initialize refs with current values
+  baseUrl.value = providers.value[providerId]?.baseUrl || providerMetadata.value?.defaultOptions?.baseUrl || ''
+
+  // Initialize headers if not already set
+  if (!providers.value[providerId]?.headers) {
+    providers.value[providerId].headers = {}
+  }
+})
+
+function handleResetSettings() {
+  providers.value[providerId] = {
+    ...(providerMetadata.value?.defaultOptions as any),
+  }
+}
+
+const headers = reactive<{ key: string, value: string }[]>([
+  { key: '', value: '' },
+])
+
+function addKeyValue(headers: { key: string, value: string }[], key: string, value: string) {
+  if (!headers)
+    return
+
+  headers.push({ key, value })
+}
+
+function removeKeyValue(index: number, headers: { key: string, value: string }[]) {
+  if (!headers)
+    return
+
+  if (headers.length === 1) {
+    headers[0].key = ''
+    headers[0].value = ''
+  }
+  else {
+    headers.splice(index, 1)
+  }
+}
+
+watch(headers, (headers) => {
+  if (headers.length > 0 && (headers[headers.length - 1].key !== '' || headers[headers.length - 1].value !== '')) {
+    headers.push({ key: '', value: '' })
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <ProviderSettingsLayout
+    :provider-name="providerMetadata?.localizedName"
+    :provider-icon="providerMetadata?.icon"
+    :on-back="() => router.back()"
+  >
+    <ProviderSettingsContainer>
+      <ProviderBasicSettings
+        title="Basic"
+        description="Essential settings"
+        :on-reset="handleResetSettings"
+      >
+        <ProviderBaseUrlInput
+          v-model="baseUrl"
+          :placeholder="providerMetadata?.defaultOptions?.baseUrl as string || ''"
+          required
+        />
+      </ProviderBasicSettings>
+
+      <ProviderAdvancedSettings title="Advanced">
+        <FieldKeyValues
+          v-model="headers"
+          label="HTTP Headers"
+          description="Add custom HTTP headers"
+          key-placeholder="Key"
+          value-placeholder="Value"
+          @add="(key, value) => addKeyValue(headers, key, value)"
+          @remove="(index) => removeKeyValue(index, headers)"
+        />
+      </ProviderAdvancedSettings>
+    </ProviderSettingsContainer>
+  </ProviderSettingsLayout>
+</template>