@lobehub/chat 1.62.11 → 1.63.1

package/src/features/ChatInput/ActionBar/config.ts

@@ -2,8 +2,9 @@ import STT from '../STT';
 import Clear from './Clear';
 import History from './History';
 import Knowledge from './Knowledge';
-import ModelSwitch from './ModelSwitch';
+import Model from './Model';
 import Params from './Params';
+import Search from './Search';
 import { MainToken, PortalToken } from './Token';
 import Tools from './Tools';
 import Upload from './Upload';
@@ -14,9 +15,10 @@ export const actionMap = {
   history: History,
   knowledgeBase: Knowledge,
   mainToken: MainToken,
-  model: ModelSwitch,
+  model: Model,
   params: Params,
   portalToken: PortalToken,
+  search: Search,
   stt: STT,
   temperature: Params,
   tools: Tools,

package/src/features/Conversation/Error/index.tsx

@@ -1,4 +1,4 @@
-import { IPluginErrorType, PluginErrorType } from '@lobehub/chat-plugin-sdk';
+import { IPluginErrorType } from '@lobehub/chat-plugin-sdk';
 import type { AlertProps } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import dynamic from 'next/dynamic';
@@ -19,7 +19,6 @@ import { ErrorActionContainer } from './style';
 const loading = () => <Skeleton active />;
 
 const OllamaBizError = dynamic(() => import('./OllamaBizError'), { loading, ssr: false });
-const PluginSettings = dynamic(() => import('./PluginSettings'), { loading, ssr: false });
 
 // Config for the errorMessage display
 const getErrorAlertConfig = (
@@ -86,10 +85,6 @@ const ErrorMessageExtra = memo<{ data: ChatMessage }>(({ data }) => {
   if (!error?.type) return;
 
   switch (error.type) {
-    case PluginErrorType.PluginSettingsInvalid: {
-      return <PluginSettings id={data.id} plugin={data.plugin} />;
-    }
-
     case AgentRuntimeErrorType.OllamaBizError: {
       return <OllamaBizError {...data} />;
     }

package/src/features/Conversation/Messages/Assistant/SearchGrounding.tsx

@@ -0,0 +1,153 @@
+import { Icon, SearchResultCards, Tag } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { AnimatePresence, motion } from 'framer-motion';
+import { ChevronDown, ChevronRight, Globe } from 'lucide-react';
+import Image from 'next/image';
+import { rgba } from 'polished';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { GroundingSearch } from '@/types/search';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  container: css`
+    width: fit-content;
+    padding-block: 4px;
+    padding-inline: 8px;
+    border-radius: 6px;
+
+    color: ${token.colorTextTertiary};
+
+    &:hover {
+      background: ${isDarkMode ? token.colorFillQuaternary : token.colorFillTertiary};
+    }
+  `,
+  expand: css`
+    background: ${isDarkMode ? token.colorFillQuaternary : token.colorFillTertiary} !important;
+  `,
+  shinyText: css`
+    color: ${rgba(token.colorText, 0.45)};
+
+    background: linear-gradient(
+      120deg,
+      ${rgba(token.colorTextBase, 0)} 40%,
+      ${token.colorTextSecondary} 50%,
+      ${rgba(token.colorTextBase, 0)} 60%
+    );
+    background-clip: text;
+    background-size: 200% 100%;
+
+    animation: shine 1.5s linear infinite;
+
+    @keyframes shine {
+      0% {
+        background-position: 100%;
+      }
+
+      100% {
+        background-position: -100%;
+      }
+    }
+  `,
+  title: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-size: 12px;
+    text-overflow: ellipsis;
+  `,
+}));
+
+const SearchGrounding = memo<GroundingSearch>(({ searchQueries, citations }) => {
+  const { t } = useTranslation('chat');
+  const { styles, cx, theme } = useStyles();
+
+  const [showDetail, setShowDetail] = useState(false);
+
+  return (
+    <Flexbox
+      className={cx(styles.container, showDetail && styles.expand)}
+      gap={16}
+      style={{ width: showDetail ? '100%' : undefined }}
+    >
+      <Flexbox
+        distribution={'space-between'}
+        flex={1}
+        gap={8}
+        horizontal
+        onClick={() => {
+          setShowDetail(!showDetail);
+        }}
+        style={{ cursor: 'pointer' }}
+      >
+        <Flexbox align={'center'} gap={8} horizontal>
+          <Icon icon={Globe} />
+          <Flexbox horizontal>{t('search.grounding.title', { count: citations?.length })}</Flexbox>
+          {!showDetail && (
+            <Flexbox horizontal>
+              {citations?.slice(0, 8).map((item, index) => (
+                <Image
+                  alt={item.title || item.url}
+                  height={16}
+                  key={`${item.url}-${index}`}
+                  src={`https://icons.duckduckgo.com/ip3/${new URL(item.url).host}.ico`}
+                  style={{
+                    background: theme.colorBgContainer,
+                    borderRadius: 8,
+                    marginInline: -2,
+                    padding: 2,
+                    zIndex: 100 - index,
+                  }}
+                  unoptimized
+                  width={16}
+                />
+              ))}
+            </Flexbox>
+          )}
+        </Flexbox>
+
+        <Flexbox gap={4} horizontal>
+          <Icon icon={showDetail ? ChevronDown : ChevronRight} />
+        </Flexbox>
+      </Flexbox>
+
+      <AnimatePresence initial={false}>
+        {showDetail && (
+          <motion.div
+            animate="open"
+            exit="collapsed"
+            initial="collapsed"
+            style={{ overflow: 'hidden', width: '100%' }}
+            transition={{
+              duration: 0.2,
+              ease: [0.4, 0, 0.2, 1], // 使用 ease-out 缓动函数
+            }}
+            variants={{
+              collapsed: { height: 0, opacity: 0, width: 'auto' },
+              open: { height: 'auto', opacity: 1, width: 'auto' },
+            }}
+          >
+            <Flexbox gap={12}>
+              {searchQueries && (
+                <Flexbox gap={4} horizontal>
+                  {t('search.grounding.searchQueries')}
+                  <Flexbox gap={8} horizontal>
+                    {searchQueries.map((query, index) => (
+                      <Tag key={index}>{query}</Tag>
+                    ))}
+                  </Flexbox>
+                </Flexbox>
+              )}
+              {citations && <SearchResultCards dataSource={citations} />}
+            </Flexbox>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </Flexbox>
+  );
+});
+
+export default SearchGrounding;

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/Debug.tsx

@@ -3,12 +3,15 @@ import { Tabs } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import PluginResult from './PluginResultJSON';
+
 interface DebugProps {
   payload: object;
   requestArgs?: string;
+  toolCallId: string;
 }
 
-const Debug = memo<DebugProps>(({ payload, requestArgs }) => {
+const Debug = memo<DebugProps>(({ payload, requestArgs, toolCallId }) => {
   const { t } = useTranslation('plugin');
   let params;
   try {
@@ -30,11 +33,11 @@ const Debug = memo<DebugProps>(({ payload, requestArgs }) => {
           key: 'function_call',
           label: t('debug.function_call'),
         },
-        // {
-        //   children: <PluginResult content={content} />,
-        //   key: 'response',
-        //   label: t('debug.response'),
-        // },
+        {
+          children: <PluginResult toolCallId={toolCallId} />,
+          key: 'response',
+          label: t('debug.response'),
+        },
       ]}
       style={{ display: 'grid', maxWidth: 800, minWidth: 400 }}
     />

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/PluginResultJSON.tsx

@@ -1,18 +1,23 @@
 import { Highlighter } from '@lobehub/ui';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 
 export interface FunctionMessageProps {
-  content: string;
+  toolCallId: string;
 }
 
-const PluginResult = memo<FunctionMessageProps>(({ content }) => {
-  let data;
+const PluginResult = memo<FunctionMessageProps>(({ toolCallId }) => {
+  const toolMessage = useChatStore(chatSelectors.getMessageByToolCallId(toolCallId));
 
-  try {
-    data = JSON.stringify(JSON.parse(content), null, 2);
-  } catch {
-    data = content;
-  }
+  const data = useMemo(() => {
+    try {
+      return JSON.stringify(JSON.parse(toolMessage?.content || ''), null, 2);
+    } catch {
+      return toolMessage?.content || '';
+    }
+  }, [toolMessage?.content]);
 
   return (
     <Highlighter language={'json'} style={{ maxHeight: 200, maxWidth: 800, overflow: 'scroll' }}>

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/Settings.tsx

@@ -21,6 +21,7 @@ const Settings = memo<{ id: string }>(({ id }) => {
           onClick={() => {
             setOpen(true);
           }}
+          size={'small'}
           title={t('setting')}
         />
         <PluginDetailModal

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/index.tsx

@@ -79,6 +79,7 @@ const Inspectors = memo<InspectorProps>(
     index,
     identifier,
     apiName,
+    id,
     arguments: requestArgs,
     showRender,
     payload,
@@ -142,7 +143,7 @@ const Inspectors = memo<InspectorProps>(
             <Settings id={identifier} />
           </Flexbox>
         </Flexbox>
-        {showDebug && <Debug payload={payload} requestArgs={requestArgs} />}
+        {showDebug && <Debug payload={payload} requestArgs={requestArgs} toolCallId={id} />}
       </Flexbox>
     );
   },

package/src/features/Conversation/Messages/Assistant/Tool/Render/CustomRender.tsx

@@ -29,10 +29,10 @@ const CustomRender = memo<
 
   const theme = useTheme();
   useEffect(() => {
-    if (!plugin?.type) return;
+    if (!plugin?.type || loading) return;
 
     setShowPluginRender(plugin?.type !== 'default');
-  }, [plugin?.type]);
+  }, [plugin?.type, loading]);
 
   if (isMessageToolUIOpen)
     return (
@@ -53,6 +53,8 @@ const CustomRender = memo<
       </Center>
     );
 
+  if (loading) return <Arguments arguments={requestArgs} shine />;
+
   return (
     <Flexbox gap={12} id={id} width={'100%'}>
       {showPluginRender ? (

package/src/features/Conversation/Messages/Assistant/Tool/Render/ErrorResponse.tsx

@@ -0,0 +1,36 @@
+import { Alert, Highlighter } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { ChatMessageError, ChatPluginPayload } from '@/types/message';
+
+import PluginSettings from './PluginSettings';
+
+interface ErrorResponseProps extends ChatMessageError {
+  id: string;
+  plugin?: ChatPluginPayload;
+}
+
+const ErrorResponse = memo<ErrorResponseProps>(({ id, type, body, message, plugin }) => {
+  const { t } = useTranslation('error');
+  if (type === 'PluginSettingsInvalid') {
+    return <PluginSettings id={id} plugin={plugin} />;
+  }
+
+  return (
+    <Alert
+      extra={
+        <Flexbox>
+          <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+            {JSON.stringify(body || { message, type }, null, 2)}
+          </Highlighter>
+        </Flexbox>
+      }
+      message={t(`response.${type}` as any)}
+      showIcon
+      type={'error'}
+    />
+  );
+});
+export default ErrorResponse;

package/src/features/Conversation/{Error → Messages/Assistant/Tool/Render}/PluginSettings.tsx

@@ -12,7 +12,7 @@ import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 import { ChatPluginPayload } from '@/types/message';
 
-import { ErrorActionContainer, useStyles } from './style';
+import { ErrorActionContainer, useStyles } from '../../../../Error/style';
 
 interface PluginSettingsProps {
   id: string;

package/src/features/Conversation/Messages/Assistant/Tool/Render/index.tsx

@@ -1,5 +1,6 @@
 import { Suspense, memo } from 'react';
 
+import ErrorResponse from '@/features/Conversation/Messages/Assistant/Tool/Render/ErrorResponse';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 
@@ -22,7 +23,11 @@ const Render = memo<RenderProps>(
     // 如果处于 loading 或者找不到 toolMessage 则展示 Arguments
     if (loading || !toolMessage) return <Arguments arguments={requestArgs} />;
 
-    if (!!toolMessage)
+    if (!!toolMessage) {
+      if (toolMessage.error) {
+        return <ErrorResponse {...toolMessage.error} id={messageId} plugin={toolMessage.plugin} />;
+      }
+
       return (
         <Suspense fallback={<Arguments arguments={requestArgs} shine />}>
           <CustomRender
@@ -33,6 +38,7 @@ const Render = memo<RenderProps>(
           />
         </Suspense>
       );
+    }
   },
 );
 

package/src/features/Conversation/Messages/Assistant/index.tsx

@@ -9,13 +9,14 @@ import { ChatMessage } from '@/types/message';
 import { DefaultMessage } from '../Default';
 import FileChunks from './FileChunks';
 import Reasoning from './Reasoning';
+import SearchGrounding from './SearchGrounding';
 import Tool from './Tool';
 
 export const AssistantMessage = memo<
   ChatMessage & {
     editableContent: ReactNode;
   }
->(({ id, tools, content, chunksList, ...props }) => {
+>(({ id, tools, content, chunksList, search, ...props }) => {
   const editing = useChatStore(chatSelectors.isMessageEditing(id));
   const generating = useChatStore(chatSelectors.isMessageGenerating(id));
 
@@ -23,6 +24,8 @@ export const AssistantMessage = memo<
 
   const isReasoning = useChatStore(aiChatSelectors.isMessageInReasoning(id));
 
+  const showSearch = !!search && !!search.citations?.length;
+
   // remove \n to avoid empty content
   // refs: https://github.com/lobehub/lobe-chat/pull/6153
   const showReasoning =
@@ -38,6 +41,9 @@ export const AssistantMessage = memo<
     />
   ) : (
     <Flexbox gap={8} id={id}>
+      {showSearch && (
+        <SearchGrounding citations={search?.citations} searchQueries={search?.searchQueries} />
+      )}
       {!!chunksList && chunksList.length > 0 && <FileChunks data={chunksList} />}
       {showReasoning && <Reasoning {...props.reasoning} id={id} />}
       {content && (

package/src/features/ModelSelect/index.tsx

@@ -4,7 +4,7 @@ import { memo, useMemo } from 'react';
 
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
 import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
-import { EnabledProviderWithModels } from '@/types/aiModel';
+import { EnabledProviderWithModels } from '@/types/aiProvider';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
   select: css`

package/src/features/ModelSwitchPanel/index.tsx

@@ -14,7 +14,7 @@ import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
-import { EnabledProviderWithModels } from '@/types/aiModel';
+import { EnabledProviderWithModels } from '@/types/aiProvider';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
   menu: css`
@@ -68,7 +68,7 @@ const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
       if (items.length === 0)
         return [
           {
-            key: 'empty',
+            key: `${provider.id}-empty`,
             label: (
               <Flexbox gap={8} horizontal style={{ color: theme.colorTextTertiary }}>
                 {t('ModelSwitchPanel.emptyModel')}
@@ -114,7 +114,6 @@ const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
         },
       }}
       placement={isMobile ? 'top' : 'topLeft'}
-      trigger={['click']}
     >
       <div className={styles.tag}>{children}</div>
     </Dropdown>

package/src/hooks/useEnabledChatModels.ts

@@ -4,7 +4,7 @@ import { isDeprecatedEdition } from '@/const/version';
 import { useAiInfraStore } from '@/store/aiInfra';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
-import { EnabledProviderWithModels } from '@/types/aiModel';
+import { EnabledProviderWithModels } from '@/types/aiProvider';
 
 export const useEnabledChatModels = (): EnabledProviderWithModels[] => {
   const enabledList = useUserStore(modelProviderSelectors.modelProviderListForModelSelect, isEqual);