feat: chat in explore support agent (#647)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

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

@@ -0,0 +1,34 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import { useTranslation } from 'react-i18next'
+import s from './style.module.css'
+import Config from '@/app/components/explore/universal-chat/config'
+
+type Props = {
+  modelId: string
+  plugins: Record<string, boolean>
+  dataSets: any[]
+}
+const ConfigViewPanel: FC<Props> = ({
+  modelId,
+  plugins,
+  dataSets,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <div className={cn('absolute top-9 right-0 z-20 p-4 bg-white rounded-2xl shadow-md', s.panelBorder)}>
+      <div className='w-[368px]'>
+        <Config
+          readonly
+          modelId={modelId}
+          plugins={plugins}
+          dataSets={dataSets}
+        />
+        <div className='mt-3 text-xs leading-[18px] text-500 font-normal'>{t('explore.universalChat.viewConfigDetailTip')}</div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(ConfigViewPanel)

web/app/components/explore/universal-chat/config-view/detail/style.module.css

@@ -0,0 +1,9 @@
+.btn {
+  background: url(~@/app/components/datasets/documents/assets/action.svg) center center no-repeat transparent;
+  background-size: 16px 16px;
+  /* mask-image: ; */
+}
+
+.panelBorder {
+  border: 0.5px solid rgba(0, 0, 0, .05);
+}

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

@@ -0,0 +1,84 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import { useBoolean, useClickAway } from 'ahooks'
+import s from './style.module.css'
+import ModelIcon from '@/app/components/app/configuration/config-model/model-icon'
+import { Google, WebReader, Wikipedia } from '@/app/components/base/icons/src/public/plugins'
+import ConfigDetail from '@/app/components/explore/universal-chat/config-view/detail'
+
+export type ISummaryProps = {
+  modelId: string
+  plugins: Record<string, boolean>
+  dataSets: any[]
+}
+
+const getColorInfo = (modelId: string) => {
+  if (modelId === 'gpt-4')
+    return s.gpt4
+
+  if (modelId === 'claude-2')
+    return s.claude
+
+  return s.gpt3
+}
+
+const getPlugIcon = (pluginId: string) => {
+  const className = 'w-4 h-4'
+  switch (pluginId) {
+    case 'google_search':
+      return <Google className={className} />
+    case 'web_reader':
+      return <WebReader className={className} />
+    case 'wikipedia':
+      return <Wikipedia className={className} />
+    default:
+      return null
+  }
+}
+
+const Summary: FC<ISummaryProps> = ({
+  modelId,
+  plugins,
+  dataSets,
+}) => {
+  const pluginIds = Object.keys(plugins).filter(key => plugins[key])
+  const [isShowConfig, { setFalse: hideConfig, toggle: toggleShowConfig }] = useBoolean(false)
+  const configContentRef = React.useRef(null)
+
+  useClickAway(() => {
+    hideConfig()
+  }, configContentRef)
+  return (
+    <div ref={configContentRef} className='relative'>
+      <div onClick={toggleShowConfig} className={cn(getColorInfo(modelId), 'flex items-center px-1 h-8 rounded-lg border cursor-pointer')}>
+        <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}
+                    className={`flex items-center justify-center w-6 h-6 rounded-md ${s.border} bg-white`}
+                  >
+                    {getPlugIcon(pluginId)}</div>
+                ))}
+              </div>
+            </div>
+          )
+        }
+      </div>
+      {isShowConfig && (
+        <ConfigDetail
+          modelId={modelId} plugins={plugins} dataSets={dataSets}
+        />
+      )}
+    </div>
+
+  )
+}
+export default React.memo(Summary)

web/app/components/explore/universal-chat/config-view/summary/style.module.css

@@ -0,0 +1,21 @@
+.border {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.gpt3 {
+  background: linear-gradient(0deg, #D3F8DF, #D3F8DF),
+linear-gradient(0deg, #EDFCF2, #EDFCF2);
+  border: 1px solid rgba(211, 248, 223, 1)
+}
+
+.gpt4 {
+  background: linear-gradient(0deg, #EBE9FE, #EBE9FE),
+  linear-gradient(0deg, #F4F3FF, #F4F3FF);
+  border: 1px solid rgba(235, 233, 254, 1)
+}
+
+.claude {
+  background: linear-gradient(0deg, #F9EBDF, #F9EBDF),
+linear-gradient(0deg, #FCF3EB, #FCF3EB);
+  border: 1px solid rgba(249, 235, 223, 1)
+}