@lobehub/chat 1.51.1 → 1.51.3

package/src/features/DevPanel/features/FloatPanel.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { ActionIcon, FluentEmoji, Icon, SideNav } from '@lobehub/ui';
+import { Dropdown, FloatButton } from 'antd';
+import { createStyles } from 'antd-style';
+import { BugIcon, BugOff, XIcon } from 'lucide-react';
+import { ReactNode, memo, useEffect, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Rnd } from 'react-rnd';
+
+import { BRANDING_NAME } from '@/const/branding';
+
+// 定义样式
+const useStyles = createStyles(({ token, css, prefixCls }) => {
+  return {
+    collapsed: css`
+      pointer-events: none;
+      transform: scale(0.8);
+      opacity: 0;
+    `,
+    expanded: css`
+      pointer-events: auto;
+      transform: scale(1);
+      opacity: 1;
+    `,
+    floatButton: css`
+      inset-block-end: 16px;
+      inset-inline-end: 16px;
+
+      width: 36px;
+      height: 36px;
+      border: 1px solid ${token.colorBorderSecondary};
+
+      font-size: 20px;
+      .${prefixCls}-float-btn-body {
+        background: ${token.colorBgLayout};
+
+        &:hover {
+          width: auto;
+          background: ${token.colorBgElevated};
+        }
+      }
+    `,
+    header: css`
+      cursor: move;
+      user-select: none;
+
+      padding-block: 8px;
+      padding-inline: 16px;
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+
+      color: ${token.colorText};
+
+      background: ${token.colorFillAlter};
+    `,
+    panel: css`
+      position: fixed;
+      z-index: 1000;
+
+      overflow: hidden;
+      display: flex;
+
+      border: 1px solid ${token.colorBorderSecondary};
+      border-radius: 12px;
+
+      background: ${token.colorBgContainer};
+      box-shadow: ${token.boxShadow};
+
+      transition: opacity ${token.motionDurationMid} ${token.motionEaseInOut};
+    `,
+  };
+});
+
+const minWidth = 800;
+const minHeight = 600;
+
+interface CollapsibleFloatPanelProps {
+  items: { children: ReactNode; icon: ReactNode; key: string }[];
+}
+
+const CollapsibleFloatPanel = memo<CollapsibleFloatPanelProps>(({ items }) => {
+  const { styles, theme } = useStyles();
+  const [tab, setTab] = useState<string>(items[0].key);
+  const [isHide, setIsHide] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [position, setPosition] = useState({ x: 100, y: 100 });
+  const [size, setSize] = useState({ height: minHeight, width: minWidth });
+
+  useEffect(() => {
+    try {
+      const localStoragePosition = localStorage.getItem('debug-panel-position');
+      if (localStoragePosition && JSON.parse(localStoragePosition)) {
+        setPosition(JSON.parse(localStoragePosition));
+      }
+    } catch {
+      /* empty */
+    }
+
+    try {
+      const localStorageSize = localStorage.getItem('debug-panel-size');
+      if (localStorageSize && JSON.parse(localStorageSize)) {
+        setSize(JSON.parse(localStorageSize));
+      }
+    } catch {
+      /* empty */
+    }
+  }, []);
+
+  return (
+    <>
+      {!isHide && (
+        <Dropdown
+          menu={{
+            items: [
+              {
+                icon: (
+                  <Icon color={theme.colorTextSecondary} icon={BugOff} size={{ fontSize: 16 }} />
+                ),
+                key: 'hide',
+                label: 'Hide Toolbar',
+                onClick: () => setIsHide(true),
+              },
+            ],
+          }}
+          trigger={['hover']}
+        >
+          <FloatButton
+            className={styles.floatButton}
+            icon={<Icon icon={isExpanded ? BugOff : BugIcon} />}
+            onClick={() => setIsExpanded(!isExpanded)}
+          />
+        </Dropdown>
+      )}
+      {isExpanded && (
+        <Rnd
+          bounds="window"
+          className={`${styles.panel} ${isExpanded ? styles.expanded : styles.collapsed}`}
+          dragHandleClassName="panel-drag-handle"
+          minHeight={minHeight}
+          minWidth={minWidth}
+          onDragStop={(e, d) => {
+            setPosition({ x: d.x, y: d.y });
+          }}
+          onResizeStop={(e, direction, ref, delta, position) => {
+            setSize({
+              height: Number(ref.style.height),
+              width: Number(ref.style.width),
+            });
+            setPosition(position);
+          }}
+          position={position}
+          size={size}
+        >
+          <Flexbox
+            height={'100%'}
+            horizontal
+            style={{ overflow: 'hidden', position: 'relative' }}
+            width={'100%'}
+          >
+            <SideNav
+              avatar={<FluentEmoji emoji={'🧰'} size={24} />}
+              bottomActions={[]}
+              style={{
+                paddingBlock: 12,
+                width: 48,
+              }}
+              topActions={items.map((item) => (
+                <ActionIcon
+                  active={tab === item.key}
+                  key={item.key}
+                  onClick={() => setTab(item.key)}
+                  placement={'right'}
+                  title={item.key}
+                >
+                  {item.icon}
+                </ActionIcon>
+              ))}
+            />
+            <Flexbox
+              height={'100%'}
+              style={{ overflow: 'hidden', position: 'relative' }}
+              width={'100%'}
+            >
+              <Flexbox
+                align={'center'}
+                className={`panel-drag-handle ${styles.header}`}
+                horizontal
+                justify={'space-between'}
+              >
+                <Flexbox align={'baseline'} gap={6} horizontal>
+                  <b>{BRANDING_NAME} Dev Tools</b>
+                  <span style={{ color: theme.colorTextDescription }}>/</span>
+                  <span style={{ color: theme.colorTextDescription }}>{tab}</span>
+                </Flexbox>
+                <ActionIcon icon={XIcon} onClick={() => setIsExpanded(false)} />
+              </Flexbox>
+              {items.map((item) => (
+                <Flexbox
+                  flex={1}
+                  height={'100%'}
+                  key={item.key}
+                  style={{
+                    display: tab === item.key ? 'flex' : 'none',
+                    overflow: 'hidden',
+                  }}
+                >
+                  {item.children}
+                </Flexbox>
+              ))}
+            </Flexbox>
+          </Flexbox>
+        </Rnd>
+      )}
+    </>
+  );
+});
+
+export default CollapsibleFloatPanel;

package/src/features/DevPanel/features/Header.tsx

@@ -0,0 +1,50 @@
+import { ActionIcon, type ActionIconProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import React, { ReactNode } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+const useStyles = createStyles(({ token, css }) => ({
+  header: css`
+    border-block-end: 1px solid ${token.colorBorderSecondary};
+  `,
+  title: css`
+    font-weight: 550;
+  `,
+}));
+
+interface HeaderProps extends Omit<FlexboxProps, 'title' | 'children'> {
+  actions?: ActionIconProps[];
+  extra?: ReactNode;
+  title?: ReactNode;
+}
+
+const Header = ({ title, actions = [], extra, ...rest }: HeaderProps) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox
+      align={'center'}
+      className={styles.header}
+      flex={'none'}
+      height={46}
+      horizontal
+      justify={'space-between'}
+      paddingInline={16}
+      {...rest}
+    >
+      <div className={styles.title}>{title}</div>
+      <Flexbox align={'center'} gap={4} horizontal>
+        {extra}
+        {actions.map((action, index) => (
+          <ActionIcon
+            {...action}
+            key={action.title || index}
+            size={{ blockSize: 28, fontSize: 16 }}
+          />
+        ))}
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default Header;

package/src/features/DevPanel/features/Table/TableCell.tsx

@@ -0,0 +1,73 @@
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import { get, isDate } from 'lodash-es';
+import React, { useMemo } from 'react';
+
+import TooltipContent from './TooltipContent';
+
+const { Text } = Typography;
+
+const useStyles = createStyles(({ token, css }) => ({
+  cell: css`
+    font-family: ${token.fontFamilyCode};
+    font-size: ${token.fontSizeSM}px;
+  `,
+  tooltip: css`
+    border: 1px solid ${token.colorBorder};
+
+    font-family: ${token.fontFamilyCode};
+    font-size: ${token.fontSizeSM}px;
+    color: ${token.colorText} !important;
+    word-break: break-all;
+
+    background: ${token.colorBgElevated} !important;
+  `,
+}));
+
+interface TableCellProps {
+  column: string;
+  dataItem: any;
+  rowIndex: number;
+}
+
+const TableCell = ({ dataItem, column, rowIndex }: TableCellProps) => {
+  const { styles } = useStyles();
+  const data = get(dataItem, column);
+  const content = useMemo(() => {
+    if (isDate(data)) return dayjs(data).format('YYYY-MM-DD HH:mm:ss');
+
+    switch (typeof data) {
+      case 'object': {
+        return JSON.stringify(data);
+      }
+
+      case 'boolean': {
+        return data ? 'True' : 'False';
+      }
+
+      default: {
+        return data;
+      }
+    }
+  }, [data]);
+
+  return (
+    <td key={column} onDoubleClick={() => console.log('Edit cell:', rowIndex, column)}>
+      <Text
+        className={styles.cell}
+        ellipsis={{
+          tooltip: {
+            arrow: false,
+            classNames: { body: styles.tooltip },
+            title: <TooltipContent>{content}</TooltipContent>,
+          },
+        }}
+      >
+        {content}
+      </Text>
+    </td>
+  );
+};
+
+export default TableCell;

package/src/features/DevPanel/features/Table/TooltipContent.tsx

@@ -0,0 +1,39 @@
+import { Highlighter } from '@lobehub/ui';
+import Link from 'next/link';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const TooltipContent = memo<{ children: ReactNode }>(({ children }) => {
+  if (typeof children !== 'string') return children;
+
+  if (children.startsWith('data:image')) {
+    return <img src={children} style={{ height: 'auto', maxWidth: '100%' }} />;
+  }
+
+  if (children.startsWith('http'))
+    return (
+      <Link href={children} target={'_blank'}>
+        {children}
+      </Link>
+    );
+
+  const code = children.trim().trimEnd();
+
+  if ((code.startsWith('{') && code.endsWith('}')) || (code.startsWith('[') && code.endsWith(']')))
+    return (
+      <Highlighter
+        language={'json'}
+        style={{
+          maxHeight: 400,
+          overflow: 'auto',
+        }}
+        type={'pure'}
+      >
+        {JSON.stringify(JSON.parse(code), null, 2)}
+      </Highlighter>
+    );
+
+  return <Flexbox>{children}</Flexbox>;
+});
+
+export default TooltipContent;

package/src/features/DevPanel/{PostgresViewer/DataTable/Table.tsx → features/Table/index.tsx}

@@ -1,9 +1,10 @@
+import { Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
+import { Loader2Icon } from 'lucide-react';
 import React from 'react';
 import { Center } from 'react-layout-kit';
 import { TableVirtuoso } from 'react-virtuoso';
 
-import { usePgTable, useTableColumns } from '../usePgTable';
 import TableCell from './TableCell';
 
 const useStyles = createStyles(({ token, css }) => ({
@@ -88,24 +89,21 @@ const useStyles = createStyles(({ token, css }) => ({
 }));
 
 interface TableProps {
-  tableName?: string;
+  columns: string[];
+  dataSource: any[];
+  loading?: boolean;
 }
 
-const Table = ({ tableName }: TableProps) => {
+const Table = ({ columns, dataSource, loading }: TableProps) => {
   const { styles } = useStyles();
 
-  const tableColumns = useTableColumns(tableName);
+  if (loading)
+    return (
+      <Center height={'100%'}>
+        <Icon icon={Loader2Icon} spin />
+      </Center>
+    );
 
-  const tableData = usePgTable(tableName);
-
-  const columns = tableColumns.data?.map((t) => t.name) || [];
-  const isLoading = tableColumns.isLoading || tableData.isLoading;
-
-  if (!tableName) return <Center height={'80%'}>Select a table to view data</Center>;
-
-  if (isLoading) return <Center height={'80%'}>Loading...</Center>;
-
-  const dataSource = tableData.data?.data || [];
   const header = (
     <tr>
       {columns.map((column) => (

package/src/features/DevPanel/index.tsx

@@ -1,12 +1,36 @@
-'use client';
+import { BookText, DatabaseIcon, FlagIcon, GlobeLockIcon } from 'lucide-react';
 
-import FloatPanel from './FloatPanel';
+import CacheViewer from './CacheViewer';
+import FeatureFlagViewer from './FeatureFlagViewer';
+import MetadataViewer from './MetadataViewer';
 import PostgresViewer from './PostgresViewer';
+import FloatPanel from './features/FloatPanel';
 
 const DevPanel = () => (
-  <FloatPanel>
-    <PostgresViewer />
-  </FloatPanel>
+  <FloatPanel
+    items={[
+      {
+        children: <PostgresViewer />,
+        icon: <DatabaseIcon size={16} />,
+        key: 'Postgres Viewer',
+      },
+      {
+        children: <MetadataViewer />,
+        icon: <BookText size={16} />,
+        key: 'SEO Metadata',
+      },
+      {
+        children: <CacheViewer />,
+        icon: <GlobeLockIcon size={16} />,
+        key: 'NextJS Caches',
+      },
+      {
+        children: <FeatureFlagViewer />,
+        icon: <FlagIcon size={16} />,
+        key: 'Feature Flags',
+      },
+    ]}
+  />
 );
 
 export default DevPanel;

package/src/libs/agent-runtime/AgentRuntime.test.ts

@@ -26,7 +26,6 @@ import {
   ModelProvider,
 } from '@/libs/agent-runtime';
 import { LobeStepfunAI } from '@/libs/agent-runtime/stepfun';
-import LobeWenxinAI from '@/libs/agent-runtime/wenxin';
 import { createTraceOptions } from '@/server/modules/AgentRuntime';
 
 import { AgentChatOptions } from './AgentRuntime';

package/src/libs/agent-runtime/AgentRuntime.ts

@@ -47,6 +47,7 @@ import {
   TextToSpeechPayload,
 } from './types';
 import { LobeUpstageAI } from './upstage';
+import { LobeWenxinAI } from './wenxin';
 import { LobeXAI } from './xai';
 import { LobeZeroOneAI } from './zeroone';
 import { LobeZhipuAI } from './zhipu';
@@ -167,6 +168,7 @@ class AgentRuntime {
       taichu: Partial<ClientOptions>;
       togetherai: Partial<ClientOptions>;
       upstage: Partial<ClientOptions>;
+      wenxin: Partial<ClientOptions>;
       xai: Partial<ClientOptions>;
       zeroone: Partial<ClientOptions>;
       zhipu: Partial<ClientOptions>;
@@ -370,6 +372,11 @@ class AgentRuntime {
         runtimeModel = new LobeDoubaoAI(params.doubao);
         break;
       }
+
+      case ModelProvider.Wenxin: {
+        runtimeModel = new LobeWenxinAI(params.wenxin);
+        break;
+      }
     }
     return new AgentRuntime(runtimeModel);
   }

package/src/libs/agent-runtime/wenxin/index.ts

@@ -1,107 +1,10 @@
-import { ChatCompletion } from '@baiducloud/qianfan';
-
-// 如果引入了这个类型，那么在跑 type-check 的 tsc 检查中就会抛错，大无语
-// import type QianFanClient from '@baiducloud/qianfan/src/ChatCompletion/index';
-import { safeParseJSON } from '@/utils/safeParseJSON';
-
-import { LobeRuntimeAI } from '../BaseAI';
-import { AgentRuntimeErrorType } from '../error';
-import { ChatCompetitionOptions, ChatStreamPayload } from '../types';
-import { AgentRuntimeError } from '../utils/createError';
-import { debugStream } from '../utils/debugStream';
-import { StreamingResponse } from '../utils/response';
-import { convertIterableToStream } from '../utils/streams';
-import { WenxinStream } from '../utils/streams/wenxin';
-import { ChatResp } from './type';
-
-interface ChatErrorCode {
-  error_code: number;
-  error_msg: string;
-}
-
-export interface LobeWenxinAIParams {
-  accessKey?: string;
-  baseURL?: string;
-  secretKey?: string;
-}
-
-export class LobeWenxinAI implements LobeRuntimeAI {
-  private client: any;
-  baseURL?: string;
-
-  constructor({ accessKey, baseURL, secretKey }: LobeWenxinAIParams = {}) {
-    if (!accessKey || !secretKey)
-      throw AgentRuntimeError.createError(AgentRuntimeErrorType.InvalidProviderAPIKey);
-
-    this.client = new ChatCompletion({
-      QIANFAN_ACCESS_KEY: accessKey,
-      QIANFAN_SECRET_KEY: secretKey,
-    });
-    this.baseURL = baseURL;
-  }
-
-  async chat(payload: ChatStreamPayload, options?: ChatCompetitionOptions) {
-    try {
-      const result = await this.client.chat(
-        { messages: payload.messages as any, stream: true, user_id: options?.user },
-        payload.model,
-      );
-
-      const wenxinStream = convertIterableToStream(result as AsyncIterable<ChatResp>);
-
-      const [prod, useForDebug] = wenxinStream.tee();
-
-      if (process.env.DEBUG_WENXIN_CHAT_COMPLETION === '1') {
-        debugStream(useForDebug).catch();
-      }
-
-      const stream = WenxinStream(prod, options?.callback);
-
-      // Respond with the stream
-      return StreamingResponse(stream, { headers: options?.headers });
-    } catch (e) {
-      const err = e as Error;
-
-      const error: ChatErrorCode | undefined = safeParseJSON(err.message);
-
-      if (!error) {
-        throw AgentRuntimeError.createError(AgentRuntimeErrorType.AgentRuntimeError, {
-          message: err.message,
-          name: err.name,
-        });
-      }
-
-      // 文心一言错误码
-      // https://cloud.baidu.com/doc/WENXINWORKSHOP/s/tlmyncueh
-      switch (error.error_code) {
-        // Invalid API key or access key
-        case 100:
-        case 13:
-        case 14: {
-          throw AgentRuntimeError.createError(AgentRuntimeErrorType.InvalidProviderAPIKey, error);
-        }
-
-        // quota limit
-        case 4:
-        case 17:
-        case 18:
-        case 19:
-        case 336_501:
-        case 336_502:
-        case 336_503:
-        case 336_504:
-        case 336_505:
-        case 336_507: {
-          throw AgentRuntimeError.createError(AgentRuntimeErrorType.QuotaLimitReached, {
-            errorCode: error.error_code,
-            message: `${error.error_msg} | you can visit https://cloud.baidu.com/doc/WENXINWORKSHOP/s/tlmyncueh for more information about the error code`,
-          });
-        }
-      }
-
-      throw AgentRuntimeError.createError(AgentRuntimeErrorType.ProviderBizError, error);
-    }
-  }
-}
-
-export default LobeWenxinAI;
+import { ModelProvider } from '../types';
+import { LobeOpenAICompatibleFactory } from '../utils/openaiCompatibleFactory';
+
+export const LobeWenxinAI = LobeOpenAICompatibleFactory({
+  baseURL: 'https://qianfan.baidubce.com/v2',
+  debug: {
+    chatCompletion: () => process.env.DEBUG_WENXIN_CHAT_COMPLETION === '1',
+  },
+  provider: ModelProvider.Wenxin,
+});

package/src/locales/default/modelProvider.ts

@@ -296,26 +296,6 @@ export default {
     tooltip: '更新服务商基础配置',
     updateSuccess: '更新成功',
   },
-  wenxin: {
-    accessKey: {
-      desc: '填入百度千帆平台的 Access Key',
-      placeholder: 'Qianfan Access Key',
-      title: 'Access Key',
-    },
-    checker: {
-      desc: '测试 AccessKey / SecretAccess 是否填写正确',
-    },
-    secretKey: {
-      desc: '填入百度千帆平台 Secret Key',
-      placeholder: 'Qianfan Secret Key',
-      title: 'Secret Key',
-    },
-    unlock: {
-      customRegion: '自定义服务区域',
-      description: '输入你的 AccessKey / SecretKey 即可开始会话。应用不会记录你的鉴权配置',
-      title: '使用自定义文心一言鉴权信息',
-    },
-  },
   zeroone: {
     title: '01.AI 零一万物',
   },