feat: 增加回答信息中ai信息展示

chenweiyi · Apr 16, 2024 · 02d1ad4 · 02d1ad4
1 parent 31e187e
commit 02d1ad4
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 19 deletions.
diff --git a/packages/frontend/src/components/answer-layout/AnswerLayout.tsx b/packages/frontend/src/components/answer-layout/AnswerLayout.tsx
@@ -1,6 +1,6 @@
 import WaveLoading from '@/components/loading/WaveLoading'
 import copyToClipboard from '@/utils/copy'
-import { ILocalSettings, getSettingData } from '@/utils/store'
+import { getSettingData } from '@/utils/store'
 import rehypePrism from '@mapbox/rehype-prism'
 import { message } from 'antd'
 import clsx from 'clsx'
@@ -17,6 +17,7 @@ import remarkGfm from 'remark-gfm'
 
 import styles from './answerLayout.less'
 import './markdown.less'
+import { getChatAIType } from '@/pages/ai/chatgpt/chat.util'
 
 type AnswerLayoutProps = {
   data: Answer.answer[]
@@ -178,14 +179,49 @@ export default function AnswerLayout(props: AnswerLayoutProps) {
                 )}
               >
                 <span
-                  className={clsx(styles.logo, {
-                    rotate: props.data.length - 1 === index && props.inputing
-                  })}
+                  className={clsx(
+                    styles.logo,
+                    {
+                      rotate: props.data.length - 1 === index && props.inputing
+                    },
+                    {
+                      'i-logos-openai-icon':
+                        item.type === 'answer' && item.modelType === 'chatgpt',
+                      'i-ion-logo-google':
+                        item.type === 'answer' && item.modelType === 'gemini',
+                      'i-material-symbols-robot-2-outline':
+                        item.type === 'answer' &&
+                        !['chatgpt', 'gemini'].includes(item.modelType)
+                    }
+                  )}
                 >
                   {item.type === 'question' && <span>我</span>}
                 </span>
                 <div className={styles.content}>
                   {generateContentWrap(item, index)}
+                  {item.type === 'answer' &&
+                    (props.data.length - 1 !== index ||
+                      (props.data.length - 1 === index && !props.inputing)) && (
+                      <div className='flex items-center mt-20px'>
+                        <Tag color={getChatAIType(item.model)}>
+                          {item.model}
+                        </Tag>
+                        <div className='w-fit flex items-center border-1px border-solid border-gray-300 px-4px py-2px rounded-4px bg-gray-200 hover:bg-gray-300'>
+                          {item.modelType === 'chatgpt' && (
+                            <span className='i-logos-openai-icon mr-4px'></span>
+                          )}
+                          {item.modelType === 'gemini' && (
+                            <span className='i-ion-logo-google mr-4px'></span>
+                          )}
+                          {!['chatgpt', 'gemini'].includes(item.modelType) && (
+                            <span className='i-material-symbols-robot-2-outline mr-4px'></span>
+                          )}
+                          <span className='text-12px text-gray-500 mr-8px'>
+                            {item.modelUrl}
+                          </span>
+                        </div>
+                      </div>
+                    )}
                 </div>
               </div>
             </li>

diff --git a/packages/frontend/src/components/answer-layout/answerLayout.less b/packages/frontend/src/components/answer-layout/answerLayout.less
@@ -86,8 +86,8 @@
       .loadingType {
         .logo {
           // background-color: #8f8;
-          background: url('~@/assets/images/openai.webp') no-repeat 100% 100%;
-          background-size: contain;
+          // background: url('~@/assets/images/openai.webp') no-repeat 100% 100%;
+          // background-size: contain;
           margin-right: 16px;
         }
 

diff --git a/packages/frontend/src/pages/ai/chatgpt/Chatgpt.tsx b/packages/frontend/src/pages/ai/chatgpt/Chatgpt.tsx
@@ -125,7 +125,10 @@ export default function IndexPage() {
             content: result.text,
             id: result.id,
             conversationId: result.conversationId,
-            error: result.error
+            error: result.error,
+            model: modelInfo?.model || '',
+            modelType: modelInfo?.modelType || '',
+            modelUrl: modelInfo?.baseUrl || ''
           }
           newData.push(newAnswer)
           // 存储回复,并存储parentMessageId, isInput, isLoading
@@ -157,7 +160,10 @@ export default function IndexPage() {
                 content: result.text,
                 id: result.id,
                 conversationId: result.conversationId,
-                error: result.error
+                error: result.error,
+                model: modelInfo?.model || '',
+                modelType: modelInfo?.modelType || '',
+                modelUrl: modelInfo?.baseUrl || ''
               }
             ]
             // 存储回复,并存储parentMessageId, isInput, isLoading
@@ -355,9 +361,6 @@ export default function IndexPage() {
   return (
     <div className={styles.container}>
       <div className='self-stretch flex items-center'>
-        <Tag icon={<FileTextOutlined />} color='#55acee'>
-          {getStableTitle(active) || '请添加会话'}
-        </Tag>
         <ModelDropdown
           modelId={active?.modelId}
           onCreateModel={onCreateModel}

diff --git a/packages/frontend/src/pages/ai/chatgpt/chat.util.ts b/packages/frontend/src/pages/ai/chatgpt/chat.util.ts
@@ -22,3 +22,18 @@ export function getStableTitle(item: IConvasition | null) {
     )
   }
 }
+
+export function getChatAIType(type: string) {
+  switch (type) {
+    case 'gpt-3.5-turbo':
+      return 'blue'
+    case 'gpt-4':
+      return 'green'
+    case 'gemini-1.0':
+      return 'gold'
+    case 'gemini-1.5':
+      return 'orange'
+    default:
+      return 'gray'
+  }
+}
diff --git a/packages/frontend/src/pages/ai/chatgpt/components/ModelDropdown.tsx b/packages/frontend/src/pages/ai/chatgpt/components/ModelDropdown.tsx
@@ -1,7 +1,9 @@
 import { ILocalSettings, IModelInfo, getSettingData } from '@/utils/store'
 import { PlusOutlined } from '@ant-design/icons'
 import { MenuProps } from 'antd'
+import clsx from 'clsx'
 import { forEach, groupBy } from 'lodash-es'
+import { getChatAIType } from '../chat.util'
 
 type IModelDropdownProps = {
   modelId?: string
@@ -29,15 +31,34 @@ export default function ModelDropdown(props: IModelDropdownProps) {
 
   forEach(models, (v, k) => {
     items.push({
-      label: <span>{k}</span>,
+      label: (
+        <div className='flex items-center'>
+          {k === 'chatgpt' ? (
+            <div className='i-logos-openai-icon?mask w-12px h-12px mr-4px text-gray-500'></div>
+          ) : (
+            <div className='i-ion-logo-google w-12px h-12px mr-7px'></div>
+          )}
+          <span>{k}</span>
+        </div>
+      ),
       key: k,
       type: 'group',
       children: v.map((m) => {
         return {
           label: (
-            <div>
-              <span className='text-16px mr-4px'>{m.model}</span>
-              <span className='text-12px text-gray-500'>{m.baseUrl}</span>
+            <div className='flex items-center'>
+              <Tag color={getChatAIType(m.model)} bordered={false}>
+                {m.model}
+              </Tag>
+              <span
+                className={clsx(
+                  m.id === props.modelId ? 'text-[#2db7f5] font-semibold' : '',
+                  'text-16px mr-4px'
+                )}
+              >
+                {m.baseUrl}
+              </span>
+              {/* <span className='text-12px text-gray-500'>{m.model}</span> */}
             </div>
           ),
           key: m.id!,
@@ -94,17 +115,30 @@ export default function ModelDropdown(props: IModelDropdownProps) {
     )
   }
 
+  function IconPrefix() {
+    switch (modelInfo?.modelType) {
+      case 'chatgpt':
+        return (
+          <div className='i-logos-openai-icon?mask w-12px h-12px mr-7px text-white'></div>
+        )
+      case 'gemini':
+        return <div className='i-ion-logo-google w-12px h-12px mr-7px'></div>
+      default:
+        return (
+          <div className='i-material-symbols-robot-2-outline w-12px h-12px mr-7px'></div>
+        )
+    }
+  }
+
   return (
     <Dropdown menu={menu} trigger={['click']}>
       <Tooltip title={modelInfo ? TipModel : ''} placement='right'>
         <Tag
           className='flex-inline items-center cursor-pointer'
-          icon={
-            <div className='i-material-symbols-robot-2-outline w-12px h-12px mr-7px'></div>
-          }
+          icon={<IconPrefix></IconPrefix>}
           color='#2db7f5'
         >
-          {modelInfo ? <span>{modelInfo.model}</span> : '请选择模型'}
+          {modelInfo ? <span>{modelInfo.baseUrl}</span> : '请选择模型'}
         </Tag>
       </Tooltip>
     </Dropdown>

diff --git a/packages/frontend/src/typings/answer.d.ts b/packages/frontend/src/typings/answer.d.ts
@@ -8,6 +8,9 @@ declare namespace Answer {
         id: string
         conversationId?: string
         error: boolean
+        model: string
+        modelType: string
+        modelUrl: string
       }
     | {
         type: 'question'