fix: 修复部份 bug (#131)

* fix: 主题模式图标不一致的问题[#125]

* fix: 修复样式问题[#123][#126]

* perf: 优化代码和添加类型

src/api/index.ts

@@ -19,7 +19,6 @@ export function fetchChatConfig<T = any>() {
   })
 }
 
-/**  实验性质的函数，用于处理聊天过程中的中间结果 */
 export function fetchChatAPIProcess<T = any>(
   params: {
     prompt: string

src/views/chat/components/Message/Text.vue

@@ -2,15 +2,7 @@
 import { computed } from 'vue'
 import { marked } from 'marked'
 import hljs from 'highlight.js'
-
-const props = defineProps<Props>()
-
-marked.setOptions({
-  renderer: new marked.Renderer(),
-  highlight(code) {
-    return hljs.highlightAuto(code).value
-  },
-})
+import { useBasicLayout } from '@/hooks/useBasicLayout'
 
 interface Props {
   inversion?: boolean
@@ -19,12 +11,23 @@ interface Props {
   loading?: boolean
 }
 
+const props = defineProps<Props>()
+
+const { isMobile } = useBasicLayout()
+
+marked.setOptions({
+  renderer: new marked.Renderer(),
+  highlight(code) {
+    return hljs.highlightAuto(code).value
+  },
+})
+
 const wrapClass = computed(() => {
   return [
     'text-wrap',
-    'p-3',
     'min-w-[20px]',
     'rounded-md',
+    isMobile.value ? 'p-2' : 'p-3',
     props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
     props.inversion ? 'dark:bg-[#a1dc95]' : 'dark:bg-[#1e1e20]',
     { 'text-red-500': props.error },

src/views/chat/components/Message/index.vue

@@ -13,7 +13,6 @@ interface Props {
 
 interface Emit {
   (ev: 'regenerate'): void
-  (ev: 'copy'): void
   (ev: 'delete'): void
 }
 
@@ -33,15 +32,15 @@ function handleRegenerate() {
 <template>
   <div class="flex w-full mb-6 overflow-hidden" :class="[{ 'flex-row-reverse': inversion }]">
     <div
-      class="flex items-center justify-center rounded-full overflow-hidden flex-shrink-0 w-[32px] h-[32px]"
-      :class="[inversion ? 'ml-3' : 'mr-3']"
+      class="flex items-center justify-center flex-shrink-0 h-8 overflow-hidden rounded-full basis-8"
+      :class="[inversion ? 'ml-2' : 'mr-2']"
     >
       <AvatarComponent :image="inversion" />
     </div>
-    <div class="flex flex-col flex-1 text-sm" :class="[inversion ? 'items-end' : 'items-start']">
-      <span class="text-xs text-[#b4bbc4]">
+    <div class="overflow-hidden text-sm " :class="[inversion ? 'items-end' : 'items-start']">
+      <p class="text-xs text-[#b4bbc4]" :class="[inversion ? 'text-right' : 'text-left']">
         {{ dateTime }}
-      </span>
+      </p>
       <div
         class="flex items-end gap-2 mt-2"
         :class="[inversion ? 'flex-row-reverse' : 'flex-row']"

src/views/chat/index.vue

@@ -95,7 +95,6 @@ async function onConversation() {
         if (lastIndex !== -1)
           chunk = responseText.substring(lastIndex)
         try {
-          globalThis.console.log(`trunk = ${chunk}`)
           const data = JSON.parse(chunk)
           updateChat(
             +uuid,
@@ -117,23 +116,6 @@ async function onConversation() {
         }
       },
     })
-    /*
-    const { data } = await fetchChatAPI<Chat.ConversationResponse>(message, options, controller.signal)
-    updateChat(
-      +uuid,
-      dataSources.value.length - 1,
-      {
-        dateTime: new Date().toLocaleString(),
-        text: data.text ?? '',
-        inversion: false,
-        error: false,
-        loading: false,
-        conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
-        requestOptions: { prompt: message, options: { ...options } },
-      },
-    )
-    scrollToBottom()
-*/
   }
   catch (error: any) {
     let errorMessage = error?.message ?? 'Something went wrong, please try again later.'
@@ -206,7 +188,6 @@ async function onRegenerate(index: number) {
         if (lastIndex !== -1)
           chunk = responseText.substring(lastIndex)
         try {
-          globalThis.console.log(`trunk = ${chunk}`)
           const data = JSON.parse(chunk)
           updateChat(
             +uuid,
@@ -227,22 +208,6 @@ async function onRegenerate(index: number) {
         }
       },
     })
-    /*
-    const { data } = await fetchChatAPI<Chat.ConversationResponse>(message, options, controller.signal)
-    updateChat(
-      +uuid,
-      index,
-      {
-        dateTime: new Date().toLocaleString(),
-        text: data.text ?? '',
-        inversion: false,
-        error: false,
-        loading: false,
-        conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
-        requestOptions: { prompt: message, ...options },
-      },
-    )
-*/
   }
   catch (error: any) {
     let errorMessage = error?.message ?? 'Something went wrong, please try again later.'
@@ -345,7 +310,7 @@ onUnmounted(() => {
 <template>
   <div class="flex flex-col h-full" :class="wrapClass">
     <main class="flex-1 overflow-hidden">
-      <div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto" :class="[{ 'p-2': isMobile }]">
+      <div ref="scrollRef" class="h-full overflow-hidden overflow-y-auto" :class="[isMobile ? 'p-2' : 'p-4']">
         <template v-if="!dataSources.length">
           <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
             <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />

src/views/chat/layout/header/index.vue

@@ -18,7 +18,7 @@ function handleUpdateCollapsed() {
 </script>
 
 <template>
-  <header class="fixed top-0 left-0 right-0 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/30 backdrop-blur">
+  <header class="fixed top-0 left-0 right-0 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 backdrop-blur">
     <div class="relative flex items-center justify-between h-14">
       <button class="flex items-center justify-center w-11 h-11" @click="handleUpdateCollapsed">
         <SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />

src/views/chat/layout/sider/Footer.vue

@@ -46,8 +46,8 @@ function handleThemeChange(key: 'light' | 'dark' | 'auto') {
     <NDropdown :options="options" placement="top" trigger="click" @select="handleThemeChange">
       <HoverButton>
         <span class="text-xl text-[#4f555e] dark:text-white">
-          <SvgIcon v-if="theme === 'dark'" icon="ri:sun-foggy-line" />
-          <SvgIcon v-if="theme === 'light'" icon="ri:moon-foggy-line" />
+          <SvgIcon v-if="theme === 'dark'" icon="ri:moon-foggy-line" />
+          <SvgIcon v-if="theme === 'light'" icon="ri:sun-foggy-line" />
           <SvgIcon v-if="theme === 'auto'" icon="ri:contrast-line" />
         </span>
       </HoverButton>