feat: history list show more info

KeJunMao · Mar 22, 2023 · 8c4d991 · 8c4d991
1 parent 5b869f0
commit 8c4d991
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 24 deletions.
diff --git a/components/tool/ToolHistory.vue b/components/tool/ToolHistory.vue
@@ -22,7 +22,7 @@ function handleUpdateName(id: string, name: string) {
   <el-scrollbar height="calc(100vh - 125px)">
     <div p-4 sm:p-y-10>
       <h2 font-bold>
-        {{ tool.name }} 
+        {{ tool.name }}
       </h2>
       <p text-gray-500 dark:text-gray-400>{{ tool.desc }}</p>
     </div>
@@ -43,6 +43,7 @@ function handleUpdateName(id: string, name: string) {
         :active="item.id === currentHistoryId"
         :id="item.id"
         :name="item.name"
+        :context="item.context"
       />
     </div>
   </el-scrollbar>

diff --git a/components/tool/ToolHistoryItem.vue b/components/tool/ToolHistoryItem.vue
@@ -1,14 +1,30 @@
 <script lang="ts" setup>
 import { onClickOutside } from "@vueuse/core";
+import { OpenAIMessages } from "~~/types";
 const props = defineProps<{
   id: string;
   name: string;
   active?: boolean;
+  context: OpenAIMessages;
 }>();
 const emits = defineEmits(["update", "remove", "change"]);
 const isEditing = ref(false);
 const value = ref(props.name);
 const target = ref(null);
+const description = computed(() => {
+  // find last and first contenxt, if role is user
+  const first = props.context.find((c) => c.role === "user");
+  const last = props.context
+    .slice()
+    .reverse()
+    .find((c) => c.role === "user");
+
+  if (first === last) {
+    return first?.content;
+  }
+  return `${first?.content} ... ${last?.content}`;
+});
+
 onClickOutside(target, (event) => {
   isEditing.value = false;
 });
@@ -31,8 +47,6 @@ watch(value, () => {
     @click="handleChage"
     ref="target"
     w-full
-    flex
-    items-center
     cursor-pointer
     rounded
     px-2
@@ -41,28 +55,33 @@ watch(value, () => {
     :class="active ? 'color-primary bg-[var(--el-color-primary-light-8)] ' : ''"
     gap-x-1
   >
-    <el-input class="flex-1" v-if="isEditing" v-model="value"> </el-input>
-    <div v-else flex-1 line-clamp-1>
-      {{ name }}
+    <div flex items-center>
+      <el-input class="flex-1" v-if="isEditing" v-model="value"> </el-input>
+      <div v-else flex-1 line-clamp-1>
+        {{ name }}
+      </div>
+      <div opacity-0 group-hover:opacity-100>
+        <el-button
+          @click="isEditing = !isEditing"
+          @click.stop=""
+          text
+          size="small"
+        >
+          <el-icon class="i-carbon:edit"></el-icon>
+        </el-button>
+        <el-button
+          :disabled="active"
+          @click.stop="handleRemove"
+          class="ml-1!"
+          text
+          size="small"
+        >
+          <el-icon class="i-carbon:trash-can"></el-icon>
+        </el-button>
+      </div>
     </div>
-    <div opacity-0 group-hover:opacity-100>
-      <el-button
-        @click="isEditing = !isEditing"
-        @click.stop=""
-        text
-        size="small"
-      >
-        <el-icon class="i-carbon:edit"></el-icon>
-      </el-button>
-      <el-button
-        :disabled="active"
-        @click.stop="handleRemove"
-        class="ml-1!"
-        text
-        size="small"
-      >
-        <el-icon class="i-carbon:trash-can"></el-icon>
-      </el-button>
+    <div text-sm mt-1 text-gray-500 dark:text-gray-400 line-clamp-2>
+      {{ description }}
     </div>
   </div>
 </template>
diff --git a/composables/useAi.ts b/composables/useAi.ts
@@ -6,6 +6,7 @@ import { HistoryItem } from "./useHistory";
 
 export const useAi = (_tool: MaybeRef<ToolItem>) => {
   const { create, update, currentHistoryId } = useHistory(_tool);
+  currentHistoryId.value = "";
   const options = computed(() => unref(_tool).options);
   const { sendMessage } = useChatGPT();
   const result = ref("");