Merge pull request #2 from KeJunMao/dev

feat: add search and tool options
KeJunMao · Mar 13, 2023 · 38dd996 · 38dd996
2 parents 430f181 + b157256
commit 38dd996
Show file tree

Hide file tree

Showing 13 changed files with 190 additions and 110 deletions.
diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
@@ -3,16 +3,15 @@
 <template>
   <el-header grid gap-2 grid-cols-12>
     <div flex items-center col-span-4>
-      <AppHeaderLogo hidden lg:block></AppHeaderLogo>
+      <AppHeaderLogo></AppHeaderLogo>
     </div>
     <div flex flex-1 items-center col-span-4 justify-center>
-      <AppHeaderLogo block lg:hidden></AppHeaderLogo>
       <AppHeaderNavigation />
     </div>
     <div flex items-center col-span-4 justify-end>
       <AppSettings />
       <AppThemeSelect />
-      <AppSocialIcons hidden md:flex />
+      <AppSocialIcons />
     </div>
   </el-header>
 </template>
diff --git a/components/app/AppSettings.vue b/components/app/AppSettings.vue
@@ -7,7 +7,15 @@ const show = ref(false);
       <el-icon class="i-carbon:settings"></el-icon>
     </el-button>
     <ClientOnly>
-      <el-dialog v-model="show" title="App Settings">
+      <el-dialog
+        v-model="show"
+        align-center
+        width="auto"
+        class="max-w-2xl w-full! h-screen sm:h-auto"
+        lock-scroll
+        title="App Settings"
+        append-to-body
+      >
         <AppGPTSettingForms />
       </el-dialog>
     </ClientOnly>

diff --git a/components/create/CreateForms.vue b/components/create/CreateForms.vue
@@ -18,7 +18,7 @@ const handleSave = async () => {
 <template>
   <div relative>
     <h2 text-xl>
-      {{ isCreate ? "Create" : "Update" }} GPT tool ({{ step + 1 }}/{{
+      {{ isCreate ? "Create" : "Update" }} Settings ({{ step + 1 }}/{{
         maxStep
       }})
     </h2>

diff --git a/components/create/CreatePreviews.vue b/components/create/CreatePreviews.vue
@@ -2,17 +2,20 @@
 const { tool, step } = useCreateTool();
 </script>
 <template>
-  <div flex items-center justify-center w-full h-full>
-    <CreatePreviewTransition name="remove" mode="out-in">
-      <ToolItem max-w-120 flex-1 v-if="step === 0" :tool="tool" />
-      <Card max-w-2xl flex-1 v-else-if="step === 1">
-        <ToolForms readonly :tool="tool" />
-      </Card>
-      <Card max-w-2xl flex-1 v-else-if="step === 2">
-        <ToolHeader :tool="tool" />
-        <ToolForms :tool="tool" />
-        <ToolRequestPreview :tool="tool" />
-      </Card>
-    </CreatePreviewTransition>
+  <div w-full h-full>
+    <h2 text-xl mb-2>Preview</h2>
+    <div flex items-center justify-center h-full>
+      <CreatePreviewTransition name="remove" mode="out-in">
+        <ToolItem max-w-120 flex-1 v-if="step === 0" :tool="tool" />
+        <Card max-w-2xl flex-1 v-else-if="step === 1">
+          <ToolForms readonly :tool="tool" />
+        </Card>
+        <Card max-w-2xl flex-1 v-else-if="step === 2">
+          <ToolHeader :tool="tool" />
+          <ToolForms :tool="tool" />
+          <ToolRequestPreview :tool="tool" />
+        </Card>
+      </CreatePreviewTransition>
+    </div>
   </div>
 </template>
diff --git a/components/tool/ToolHeader.vue b/components/tool/ToolHeader.vue
@@ -23,7 +23,7 @@ const { isCustomTool } = useTools();
       border
       dark:border-gray-800
     >
-      <ToolIcon :icon="tool.icon"/>
+      <ToolIcon :icon="tool.icon" />
     </div>
     <div flex flex-col gap-y-1 flex-1>
       <div font-bold>{{ tool?.name }}</div>
@@ -32,7 +32,6 @@ const { isCustomTool } = useTools();
       </div>
     </div>
     <div v-if="showAction && isCustomTool(tool.id!)" flex gap-1>
-      <ToolSettingDialog :tool="tool" />
       <NuxtLink
         :to="{
           path: localePath('/create'),
@@ -41,10 +40,11 @@ const { isCustomTool } = useTools();
           },
         }"
       >
-        <el-button text>
+        <el-button size="small" text>
           <el-icon class="i-carbon:edit"></el-icon>
         </el-button>
       </NuxtLink>
+      <ToolSettingDialog :tool="tool" />
     </div>
   </div>
 </template>
diff --git a/components/tool/ToolList.vue b/components/tool/ToolList.vue
@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 const localePath = useLocalePath();
 const { tools } = useTools();
+const { search } = useQuerySearch();
+const searchTools = computed(() =>
+  tools.value.filter((v) => v.name?.toLocaleLowerCase()?.includes(search.value))
+);
 </script>
 
 <template>
@@ -14,26 +18,21 @@ const { tools } = useTools();
       lg:grid-cols-4
       gap-6
     >
-      <NuxtLink :to="localePath('create')">
-        <ToolItem
-          h-full
-          :tool="{
-            id: 'create',
-            name: 'Create',
-            desc: 'Make you own GPT tool',
-            icon: 'i-carbon:add-filled',
-            roles: [],
-            forms: [],
-          }"
-        />
-      </NuxtLink>
       <NuxtLink
-        v-for="item in tools"
+        v-for="item in searchTools"
         :key="item.id"
         :to="localePath(`/ai-${item.id}`)"
       >
         <ToolItem h-full :tool="item" />
       </NuxtLink>
     </div>
+    <el-empty
+      v-if="!searchTools.length"
+      :description="
+        tools.length === 0
+          ? 'Please create the tool first'
+          : `No '${search}' results found`
+      "
+    ></el-empty>
   </div>
 </template>
diff --git a/components/tool/ToolSearch.vue b/components/tool/ToolSearch.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+const { search } = useQuerySearch();
+const localePath = useLocalePath();
+</script>
+
+<template>
+  <div flex flex-col justify-between gap-3 sm:flex-row sm:items-center>
+    <el-input
+      class="w-full sm:max-w-sm"
+      v-model="search"
+      type="search"
+      placeholder="Search Tool"
+    >
+    </el-input>
+    <div flex items-center>
+      <div hidden sm:block mr-2 class="animate-bounce-x" text-2xl>👉🏻</div>
+      <nuxt-link :to="localePath('/create')" w-full>
+        <el-button type="primary" w-full>
+          <el-icon class="i-carbon:add-filled mr-1"></el-icon>
+          Create
+        </el-button>
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<style>
+@keyframes bounce-x {
+  0%,
+  100% {
+    transform: translateX(-25%);
+    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateX(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+.animate-bounce-x {
+  animation: bounce-x 1s infinite;
+}
+</style>
diff --git a/components/tool/ToolSettingDialog.vue b/components/tool/ToolSettingDialog.vue
@@ -1,39 +1,56 @@
 <script lang="ts" setup>
 import { ToolItem } from "~/composables/useTools";
+import { defaultChatGPTOptions } from "~/composables/useChatGPT";
+import { objectPick } from "@vueuse/core";
 
 const props = defineProps<{
   tool: ToolItem;
 }>();
 const show = ref(false);
-const { remove } = useCustomTools();
-function handleRemove() {
-  remove(props.tool.id!);
-  navigateTo("/", {
-    replace: true,
+const { save } = useCustomTools();
+
+const formData = ref<Record<string, any>>({
+  ...objectPick(defaultChatGPTOptions, [
+    "temperature",
+    "top_p",
+    "n",
+    "max_tokens",
+    "presence_penalty",
+    "frequency_penalty",
+  ]),
+  ...props.tool.options,
+});
+
+async function handleSave() {
+  await save({
+    ...props.tool,
+    options: formData.value,
   });
+  show.value = false;
+  ElMessage.success("Saved success!");
 }
 </script>
 
 <template>
   <div>
-    <el-button text @click="show = true">
+    <el-button size="small" text @click="show = true">
       <el-icon class="i-carbon:settings"></el-icon>
     </el-button>
     <el-dialog
-      :title="`${tool.name || 'Tool'} Settings`"
       v-model="show"
+      :title="`'${tool.name || 'Tool'}' GPT Options`"
+      align-center
+      width="auto"
+      class="max-w-2xl w-full! h-screen sm:h-auto sm:max-h-3xl of-auto"
+      lock-scroll
       append-to-body
     >
-      <el-form label-position="top">
-        <el-form-item label="TODO"> // TODO </el-form-item>
-        <el-form-item label="Action">
-          <div flex w-full justify-between>
-            <div>
-              <el-button>Share</el-button>
-              <el-button>Export</el-button>
-            </div>
-            <el-button @click="handleRemove" type="danger">Remove</el-button>
-          </div>
+      <el-form label-position="top" size="large">
+        <el-form-item v-for="(_, name) in formData" :label="name">
+          <el-input v-model="formData[name]"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleSave" type="primary">Save</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>

diff --git a/composables/useAi.ts b/composables/useAi.ts
@@ -4,19 +4,25 @@ import { useChatGPT } from "./useChatGPT";
 
 export const useAi = (id: string) => {
   const { tool } = useTool(id);
+  const options = computed(() => tool.value?.options);
   const { sendMessage } = useChatGPT();
   const result = ref("");
   const loading = ref(false);
   const resultHtml = computed(() => marked.parse(result.value));
+
   const send = async (data: MaybeRef<Record<string, any>>) => {
     data = unref(data);
     const messages = parseRoles(data, tool.value?.roles!);
     result.value = "";
     loading.value = true;
     try {
-      await sendMessage(messages, (message) => {
-        result.value += message;
-      });
+      await sendMessage(
+        messages,
+        (message) => {
+          result.value += message;
+        },
+        options.value
+      );
     } catch (error: any) {
       result.value = error?.message ?? String(error);
     }