Merge pull request #252 from satrong/fix-041112

优化聊天界面
sugarforever · Apr 11, 2024 · a8a773e · a8a773e
2 parents cb1e7cf + 7df5678
commit a8a773e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 34 deletions.
diff --git a/components/Chat.vue b/components/Chat.vue
@@ -326,13 +326,13 @@ async function saveMessage(data: Omit<ChatHistory, 'sessionId'>) {
         <div class="text-gray-500 dark:text-gray-400 p-1">{{ message.role }}</div>
         <div class="leading-6 text-sm flex items-center max-w-full message-content"
              :class="{ 'text-gray-400 dark:text-gray-500': message.type === 'canceled', 'flex-row-reverse': message.role === 'user' }">
-          <div class="border border-primary/20 rounded-lg p-3 max-w-[90%] box-border"
+          <div class="border border-primary/20 rounded-lg p-3 max-w-[calc(100%-2rem)] box-border"
                :class="`${message.role == 'assistant' ? 'bg-gray-50 dark:bg-gray-800' : 'bg-primary-50 dark:bg-primary-400/60'}`">
             <div v-if="message.type === 'loading'"
                  class="text-xl text-primary animate-spin i-heroicons-arrow-path-solid">
             </div>
             <template v-else>
-              <pre v-if="message.role === 'user'" v-html="message.content" class="whitespace-break-spaces"></pre>
+              <pre v-if="message.role === 'user'" v-html="message.content" class="whitespace-break-spaces" />
               <div v-else>
                 <div v-html="markdown.render(message.content)" class="markdown-body" />
                 <Sources :relevant_documents="message?.relevantDocs || []" />
@@ -359,15 +359,15 @@ async function saveMessage(data: Omit<ChatHistory, 'sessionId'>) {
                     @stop="onAbortChat">
         <div class="text-muted flex">
           <UTooltip v-if="sessionInfo?.model" text="Current Model" :popper="{ placement: 'top-start' }">
-            <div class="flex items-center mr-4">
+            <div class="flex items-center mr-4 cursor-pointer hover:text-primary-400" @click="onOpenSettings">
               <UIcon name="i-heroicons-rectangle-stack" class="mr-1"></UIcon>
               <span class="text-sm">{{ sessionInfo?.modelFamily }}</span>
               <span class="text-muted mx-1">/</span>
               <span class="text-sm">{{ sessionInfo?.model }}</span>
             </div>
           </UTooltip>
           <UTooltip text="Attached Message Count" :popper="{ placement: 'top-start' }">
-            <div class="flex items-center">
+            <div class="flex items-center cursor-pointer hover:text-primary-400" @click="onOpenSettings">
               <UIcon name="i-material-symbols-history" class="mr-1"></UIcon>
               <span class="text-sm">{{ sessionInfo?.attachedMessagesCount }}</span>
             </div>

diff --git a/components/ChatMessageActionMore.vue b/components/ChatMessageActionMore.vue
@@ -15,36 +15,38 @@ const emits = defineEmits<{
 const { copy, isSupported } = useClipboard({ legacy: true })
 const toast = useToast()
 
-const buttons = [
-  {
-    label: 'Copy',
-    icon: 'i-material-symbols-content-copy-outline',
-    click: (e: MouseEvent) => {
-      (e.currentTarget as any)?.focus()
-      if (isSupported.value) {
-        copy(props.message.content)
-      } else {
-        toast.add({ title: 'Copy failed', color: 'red' })
+const buttons = computed(() => {
+  return [
+    {
+      label: 'Copy',
+      icon: 'i-material-symbols-content-copy-outline',
+      click: (e: MouseEvent) => {
+        (e.currentTarget as any)?.focus()
+        if (isSupported.value) {
+          copy(props.message.content)
+        } else {
+          toast.add({ title: 'Copy failed', color: 'red' })
+        }
       }
-    }
-  },
-  props.message.role === 'user'
-    ? {
-      label: 'Resend',
-      icon: 'i-material-symbols-sync',
+    },
+    props.message.role === 'user'
+      ? {
+        label: 'Resend',
+        icon: 'i-material-symbols-sync',
+        click: () => {
+          emits('resend')
+        }
+      }
+      : [],
+    {
+      label: 'Remove',
+      icon: 'i-material-symbols-delete-outline-rounded',
       click: () => {
-        emits('resend')
+        emits('remove')
       }
-    }
-    : [],
-  {
-    label: 'Remove',
-    icon: 'i-material-symbols-delete-outline-rounded',
-    click: () => {
-      emits('remove')
-    }
-  },
-].flat()
+    },
+  ].flat()
+})
 
 </script>
 

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,6 +1,4 @@
 <script setup>
-const route = useRoute()
-
 const links = [
   [{
     label: 'Home',
@@ -20,7 +18,7 @@ const links = [
     to: '/knowledgebases'
   }, {
     label: 'Chat',
-    icon: 'i-heroicons-pencil-square',
+    icon: 'i-iconoir-chat-lines',
     to: '/chat'
   }, {
     label: 'Settings',