feat: model summary

web/app/components/app/configuration/config-model/model-icon.tsx

@@ -2,11 +2,13 @@
 import type { FC } from 'react'
 import React from 'react'
 import { ProviderType } from '@/types/app'
+import { MODEL_LIST } from '@/config'
 
-export type IModelIconProps = { provider?: ProviderType; className?: string }
+export type IModelIconProps = { modelId?: string; provider?: ProviderType; className?: string }
 
-const ModelIcon: FC<IModelIconProps> = ({ provider, className }) => {
-  if (provider === ProviderType.anthropic) {
+const ModelIcon: FC<IModelIconProps> = ({ modelId, provider, className }) => {
+  const model = MODEL_LIST.find(item => item.id === modelId)
+  if (provider === ProviderType.anthropic || model?.provider === ProviderType.anthropic) {
     return (
       <svg className={`w-4 h-4 ${className}`} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect width="24" height="24" rx="6" fill="#CA9F7B"/>

web/app/components/explore/universal-chat/config-view/panel.tsx

+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+const ConfigViewPanel: FC = () => {
+  return (
+    <div>
+    </div>
+  )
+}
+export default React.memo(ConfigViewPanel)

web/app/components/explore/universal-chat/config-view/summary.tsx

+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import ModelIcon from '@/app/components/app/configuration/config-model/model-icon'
+export type ISummaryProps = {
+  modelId: string
+  pluginIds: string[]
+}
+
+const getColorInfo = (modelId: string) => {
+  if (modelId === 'gpt-4')
+    return 'bg-[#EBE9FE] border-[#F4F3FF]'
+
+  if (modelId === 'claude-2')
+    return 'bg-[#F9EBDF] border-[#FCF3EB]'
+
+  return 'bg-[#D3F8DF] border-[#EDFCF2]'
+}
+
+const Summary: FC<ISummaryProps> = ({
+  modelId,
+  pluginIds,
+}) => {
+  return (
+    <div className={cn(getColorInfo(modelId), 'flex items-center px-1 h-8 rounded-lg border')}>
+      <ModelIcon modelId={modelId} className='!w-6 !h-6' />
+      <div className='ml-2 text-[13px] font-medium text-gray-900'>{modelId}</div>
+      {
+        pluginIds.length > 0 && (
+          <div className='ml-1.5 flex items-center'>
+            <div className='mr-1 h-3 w-[1px] bg-[#000] opacity-[0.05]'></div>
+            <div className='flex space-x-1'>
+              {pluginIds.map(pluginId => (
+                <div key={pluginId}>{pluginId[0]}</div>
+              ))}
+            </div>
+          </div>
+        )
+      }
+    </div>
+  )
+}
+export default React.memo(Summary)

web/app/components/explore/universal-chat/index.tsx

@@ -35,6 +35,7 @@ import { replaceStringWithValues } from '@/app/components/app/configuration/prom
 import { userInputsFormToPromptVariables } from '@/utils/model-config'
 import Confirm from '@/app/components/base/confirm'
 import type { DataSet } from '@/models/datasets'
+import ConfigSummary from '@/app/components/explore/universal-chat/config-view/summary'
 
 const APP_ID = 'universal-chat'
 const isUniversalChat = true
@@ -562,12 +563,16 @@ const Main: FC<IMainProps> = () => {
         )
         }>
           <div className={cn(doShowSuggestion ? 'pb-[140px]' : (isResponsing ? 'pb-[113px]' : 'pb-[76px]'), 'relative grow h-[200px]  mb-3.5 overflow-hidden')}>
-            {!isNewConversation && (
+            {(!isNewConversation || isResponsing) && (
               <div className='absolute z-10 top-0 left-0 right-0 flex items-center justify-between border-b border-gray-100 mobile:h-12 tablet:h-16 px-8 bg-white'>
                 <div className='text-gray-900'>{conversationName}</div>
+                <div className='flex items-center shrink-0 ml-2'>
+                  <ConfigSummary modelId={modelId} pluginIds={Object.keys(plugins).filter(key => plugins[key])}
+                  />
+                </div>
               </div>
             )}
-            <div className={cn(!isNewConversation && 'pt-[90px]', 'pc:w-[794px] max-w-full mobile:w-full mx-auto h-full overflow-y-auto')} ref={chatListDomRef}>
+            <div className={cn((!isNewConversation || isResponsing) && 'pt-[90px]', 'pc:w-[794px] max-w-full mobile:w-full mx-auto h-full overflow-y-auto')} ref={chatListDomRef}>
               <Chat
                 configElem={<Init
                   modelId={modelId}