@lobehub/chat 0.114.8 → 0.115.0

package/locales/zh-CN/plugin.json

@@ -129,8 +129,8 @@
   },
   "pluginList": "插件列表",
   "plugins": {
-    "loading": "插件检测中...",
-    "unknown": "未知插件"
+    "loading": "工具检测中...",
+    "unknown": "未知工具"
   },
   "setting": "插件设置",
   "settings": {

package/locales/zh-CN/setting.json

@@ -293,7 +293,7 @@
   },
   "tools": {
     "builtins": {
-      "groupName": "内置"
+      "groupName": "内置扩展"
     },
     "plugins": {
       "enabled": "已启用 {{num}}",

package/locales/zh-CN/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "自动生成",
+    "generate": "生成",
+    "generating": "生成中...",
+    "images": "图片:"
+  }
+}

package/locales/zh-TW/common.json

@@ -50,16 +50,36 @@
     "title": "匯入資料"
   },
   "lang": {
+    "bn": "孟加拉語",
+    "cs-CZ": "捷克語",
+    "da-DK": "丹麥語",
     "de-DE": "德語",
+    "el-GR": "希臘語",
     "en": "英文",
     "en-US": "英文",
     "es-ES": "西班牙語",
+    "fi-FI": "芬蘭語",
     "fr-FR": "法語",
+    "hi-IN": "印地語",
+    "hu-HU": "匈牙利語",
+    "id-ID": "印尼語",
+    "it-IT": "義大利語",
     "ja-JP": "日文",
     "ko-KR": "韓文",
+    "nl-NL": "荷蘭語",
+    "no-NO": "挪威語",
+    "pl-PL": "波蘭語",
     "pt-BR": "葡萄牙語",
+    "pt-PT": "葡萄牙語",
+    "ro-RO": "羅馬尼亞語",
     "ru-RU": "俄文",
+    "sk-SK": "斯洛伐克語",
+    "sr-RS": "塞爾維亞語",
+    "sv-SE": "瑞典語",
+    "th-TH": "泰語",
     "tr-TR": "土耳其",
+    "uk-UA": "烏克蘭語",
+    "vi-VN": "越南語",
     "zh": "簡體中文",
     "zh-CN": "簡體中文",
     "zh-TW": "繁體中文"

package/locales/zh-TW/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "自動生成",
+    "generate": "生成",
+    "generating": "生成中...",
+    "images": "圖片:"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.114.8",
+  "version": "0.115.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/api/openai/images/createImageGeneration.ts

@@ -0,0 +1,26 @@
+import OpenAI from 'openai';
+
+import { OpenAIImagePayload } from '@/types/openai/image';
+
+export const createImageGeneration = async ({
+  openai,
+  payload,
+}: {
+  openai: OpenAI;
+  payload: OpenAIImagePayload;
+}) => {
+  const res = await openai.images.generate({ ...payload, response_format: 'url' });
+
+  const urls = res.data.map((o) => o.url) as string[];
+
+  return new Response(JSON.stringify(urls));
+};
+
+// const mockImages = [
+//   'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/292159272-032d5c8b-20be-48d9-8dbb-f2491f231bac.png',
+//   'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/292159798-cad89421-20c5-44b0-a337-fcbb857f1f70.png',
+//   'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/292160015-2263156f-d41f-48ae-9c2c-d96799b9d2b8.png',
+//   'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/292160229-592d112f-5dfd-47d7-98d3-44bc09dc91f7.png',
+// ];
+// export const createImageGeneration = async () =>
+//   new Response(JSON.stringify([mockImages[Math.round(Math.random() * 3)]]));

package/src/app/api/openai/images/route.ts

@@ -0,0 +1,16 @@
+import { OpenAIImagePayload } from '@/types/openai/image';
+
+import { createBizOpenAI } from '../createBizOpenAI';
+import { createImageGeneration } from './createImageGeneration';
+
+export const runtime = 'edge';
+
+export const POST = async (req: Request) => {
+  const payload = (await req.json()) as OpenAIImagePayload;
+
+  const openaiOrErrResponse = createBizOpenAI(req, payload.model);
+  // if resOrOpenAI is a Response, it means there is an error,just return it
+  if (openaiOrErrResponse instanceof Response) return openaiOrErrResponse;
+
+  return createImageGeneration({ openai: openaiOrErrResponse, payload });
+};

package/src/app/api/proxy/route.ts

@@ -6,5 +6,7 @@ export const runtime = 'edge';
 export const POST = async (req: Request) => {
   const url = await req.text();
 
-  return fetch(url);
+  const res = await fetch(url);
+
+  return new Response(res.body, { headers: res.headers });
 };

package/src/app/chat/(desktop)/features/ChatHeader.tsx

@@ -17,12 +17,11 @@ import PluginTag from '../../features/ChatHeader/PluginTag';
 import SettingButton from '../../features/ChatHeader/SettingButton';
 import ShareButton from '../../features/ChatHeader/ShareButton';
 
-const Header = memo(() => {
+const Left = memo(() => {
+  const { t } = useTranslation('chat');
   const init = useSessionChatInit();
   const router = useRouter();
 
-  const { t } = useTranslation('chat');
-
   const [isInbox, title, description, avatar, backgroundColor, model, plugins] = useSessionStore(
     (s) => [
       sessionSelectors.isInboxSession(s),
@@ -35,66 +34,67 @@ const Header = memo(() => {
     ],
   );
 
+  const displayTitle = isInbox ? t('inbox.title') : title;
+  const displayDesc = isInbox ? t('inbox.desc') : description;
+
+  return !init ? (
+    <Flexbox horizontal>
+      <Skeleton
+        active
+        avatar={{ shape: 'circle', size: 'default' }}
+        paragraph={false}
+        title={{ style: { margin: 0, marginTop: 8 }, width: 200 }}
+      />
+    </Flexbox>
+  ) : (
+    <Flexbox align={'flex-start'} gap={12} horizontal>
+      <Avatar
+        avatar={avatar}
+        background={backgroundColor}
+        onClick={() =>
+          isInbox
+            ? router.push('/settings/agent')
+            : router.push(pathString('/chat/settings', { hash: location.hash }))
+        }
+        size={40}
+        title={title}
+      />
+      <ChatHeaderTitle
+        desc={displayDesc}
+        tag={
+          <>
+            <Tag icon={<SiOpenai size={'1em'} />}>{model}</Tag>
+            {plugins?.length > 0 && <PluginTag plugins={plugins} />}
+          </>
+        }
+        title={displayTitle}
+      />
+    </Flexbox>
+  );
+});
+
+const Right = memo(() => {
+  const { t } = useTranslation('chat');
+
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
     s.toggleChatSideBar,
   ]);
 
-  const displayTitle = isInbox ? t('inbox.title') : title;
-  const displayDesc = isInbox ? t('inbox.desc') : description;
-
   return (
-    <ChatHeader
-      left={
-        !init ? (
-          <Flexbox horizontal>
-            <Skeleton
-              active
-              avatar={{ shape: 'circle', size: 'default' }}
-              paragraph={false}
-              title={{ style: { margin: 0, marginTop: 8 }, width: 200 }}
-            />
-          </Flexbox>
-        ) : (
-          <Flexbox align={'flex-start'} gap={12} horizontal>
-            <Avatar
-              avatar={avatar}
-              background={backgroundColor}
-              onClick={() =>
-                isInbox
-                  ? router.push('/settings/agent')
-                  : router.push(pathString('/chat/settings', { hash: location.hash }))
-              }
-              size={40}
-              title={title}
-            />
-            <ChatHeaderTitle
-              desc={displayDesc}
-              tag={
-                <>
-                  <Tag icon={<SiOpenai size={'1em'} />}>{model}</Tag>
-                  {plugins?.length > 0 && <PluginTag plugins={plugins} />}
-                </>
-              }
-              title={displayTitle}
-            />
-          </Flexbox>
-        )
-      }
-      right={
-        <>
-          <ShareButton />
-          <ActionIcon
-            icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
-            onClick={() => toggleConfig()}
-            size={DESKTOP_HEADER_ICON_SIZE}
-            title={t('roleAndArchive')}
-          />
-          <SettingButton />
-        </>
-      }
-    />
+    <>
+      <ShareButton />
+      <ActionIcon
+        icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
+        onClick={() => toggleConfig()}
+        size={DESKTOP_HEADER_ICON_SIZE}
+        title={t('roleAndArchive')}
+      />
+      <SettingButton />
+    </>
   );
 });
 
+const Header = memo(() => <ChatHeader left={<Left />} right={<Right />} />);
+
 export default Header;

package/src/app/chat/features/ChatHeader/PluginTag/PluginStatus.tsx

@@ -1,5 +1,6 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Badge, Button, Tag } from 'antd';
+import isEqual from 'fast-deep-equal';
 import { LucideRotateCw, LucideTrash2, RotateCwIcon } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 import ManifestPreviewer from '@/components/ManifestPreviewer';
 import { useSessionStore } from '@/store/session';
 import { useToolStore } from '@/store/tool';
-import { customPluginSelectors, pluginSelectors } from '@/store/tool/selectors';
+import { customPluginSelectors, toolSelectors } from '@/store/tool/selectors';
 
 interface PluginStatusProps {
   deprecated?: boolean;
@@ -18,12 +19,12 @@ interface PluginStatusProps {
 const PluginStatus = memo<PluginStatusProps>(({ title, id, deprecated }) => {
   const { t } = useTranslation('common');
   const [status, isCustom, reinstallCustomPlugin] = useToolStore((s) => [
-    pluginSelectors.getPluginManifestLoadingStatus(id)(s),
+    toolSelectors.getManifestLoadingStatus(id)(s),
     customPluginSelectors.isCustomPlugin(id)(s),
     s.reinstallCustomPlugin,
   ]);
 
-  const manifest = useToolStore(pluginSelectors.getPluginManifestById(id));
+  const manifest = useToolStore(toolSelectors.getManifestById(id), isEqual);
 
   const removePlugin = useSessionStore((s) => s.removePlugin);
 
@@ -44,8 +45,10 @@ const PluginStatus = memo<PluginStatusProps>(({ title, id, deprecated }) => {
           />
         );
       }
+
+      default:
       case 'success': {
-        return <Badge status={status} />;
+        return <Badge status={'success'} />;
       }
     }
   }, [status]);

package/src/app/chat/features/ChatHeader/PluginTag/index.tsx

@@ -6,7 +6,7 @@ import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
 
 import { pluginHelpers, useToolStore } from '@/store/tool';
-import { pluginSelectors } from '@/store/tool/selectors';
+import { toolSelectors } from '@/store/tool/selectors';
 
 import PluginStatus from './PluginStatus';
 
@@ -15,8 +15,8 @@ export interface PluginTagProps {
 }
 
 const PluginTag = memo<PluginTagProps>(({ plugins }) => {
-  const list = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
-  const displayPlugin = useToolStore(pluginSelectors.getPluginMetaById(plugins[0]), isEqual);
+  const list = useToolStore(toolSelectors.metaList, isEqual);
+  const displayPlugin = useToolStore(toolSelectors.getMetaById(plugins[0]), isEqual);
 
   if (plugins.length === 0) return null;
 

package/src/app/chat/features/SystemRole/index.tsx

@@ -78,7 +78,6 @@ const SystemRole = memo(() => {
             <EditableMessage
               classNames={{ markdown: styles.prompt }}
               editing={editing}
-              height={editing ? 'calc(70vh - 108px)' : 'calc(70vh - 357.43px)'}
               model={{
                 extra: (
                   <AgentInfo

package/src/components/GalleyGrid/Grid.tsx

@@ -0,0 +1,36 @@
+import { CSSProperties, ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { MAX_SIZE_DESKTOP, MIN_IMAGE_SIZE, useStyles } from './style';
+
+interface GridProps {
+  children: ReactNode;
+  className?: string;
+  col?: number;
+  gap?: number;
+  max?: number;
+  min?: number;
+  style?: CSSProperties;
+}
+
+const Grid = memo<GridProps>(
+  ({
+    gap = 4,
+    col = 3,
+    max = MAX_SIZE_DESKTOP,
+    min = MIN_IMAGE_SIZE,
+    children,
+    className,
+    style,
+  }) => {
+    const { styles, cx } = useStyles({ col, gap, max, min });
+
+    return (
+      <Flexbox className={cx(styles.container, className)} gap={gap} horizontal style={style}>
+        {children}
+      </Flexbox>
+    );
+  },
+);
+
+export default Grid;

package/src/components/GalleyGrid/index.tsx

@@ -0,0 +1,58 @@
+import { useResponsive } from 'antd-style';
+import { ReactNode, memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Grid from './Grid';
+import { MAX_SIZE_DESKTOP, MAX_SIZE_MOBILE } from './style';
+
+interface GalleyGridProps<T = any> {
+  items: T[];
+  renderItem: (props: T) => ReactNode;
+}
+
+const GalleyGrid = memo<GalleyGridProps>(({ items, renderItem: Render }) => {
+  const { mobile } = useResponsive();
+
+  const { firstRow, lastRow } = useMemo(() => {
+    if (items.length === 4) {
+      return {
+        firstRow: items.slice(0, 2),
+        lastRow: items.slice(2, 4),
+      };
+    }
+
+    const firstCol = items.length % 3 === 0 ? 3 : items.length % 3;
+
+    return {
+      firstRow: items.slice(0, firstCol),
+      lastRow: items.slice(firstCol, items.length),
+    };
+  }, [items]);
+
+  const { gap, max } = useMemo(
+    () => ({
+      gap: mobile ? 4 : 6,
+      max: mobile ? MAX_SIZE_MOBILE : MAX_SIZE_DESKTOP,
+    }),
+    [mobile],
+  );
+
+  return (
+    <Flexbox gap={gap}>
+      <Grid col={firstRow.length} gap={gap} max={max}>
+        {firstRow.map((i, index) => (
+          <Render {...i} key={index} />
+        ))}
+      </Grid>
+      {lastRow.length > 0 && (
+        <Grid col={lastRow.length > 2 ? 3 : lastRow.length} gap={gap} max={max}>
+          {lastRow.map((i, index) => (
+            <Render {...i} key={index} />
+          ))}
+        </Grid>
+      )}
+    </Flexbox>
+  );
+});
+
+export default GalleyGrid;

package/src/components/GalleyGrid/style.ts

@@ -0,0 +1,24 @@
+import { createStyles } from 'antd-style';
+
+export const MIN_IMAGE_SIZE = 64;
+export const MAX_SIZE_DESKTOP = 640;
+export const MAX_SIZE_MOBILE = 280;
+export const useStyles = createStyles(
+  ({ css }, { col, gap, max, min }: { col: number; gap: number; max: number; min: number }) => ({
+    container: css`
+      display: grid;
+      grid-gap: ${gap}px;
+      grid-template-columns: repeat(${col}, 1fr);
+
+      width: 100%;
+      max-width: ${max}px;
+
+      & > div {
+        width: 100%;
+        min-width: ${min}px;
+        min-height: ${min}px;
+        max-height: ${(max - gap * (col - 1)) / col}px;
+      }
+    `,
+  }),
+);

package/src/const/settings.ts

@@ -72,9 +72,16 @@ export const DEFAULT_TTS_CONFIG: GlobalTTSConfig = {
   sttServer: 'openai',
 };
 
+export const DEFAULT_TOOL_CONFIG = {
+  dalle: {
+    autoGenerate: false,
+  },
+};
+
 export const DEFAULT_SETTINGS: GlobalSettings = {
   defaultAgent: DEFAULT_AGENT,
   languageModel: DEFAULT_LLM_CONFIG,
+  tool: DEFAULT_TOOL_CONFIG,
   tts: DEFAULT_TTS_CONFIG,
   ...DEFAULT_BASE_SETTINGS,
 };

package/src/database/schemas/files.ts

@@ -14,6 +14,7 @@ export const DB_FileSchema = z.object({
    * @example 'image/png'
    */
   fileType: z.string(),
+  metadata: z.any().optional(),
   /**
    * file name
    * @example 'test.png'

package/src/database/schemas/message.ts

@@ -11,7 +11,7 @@ const PluginSchema = z.object({
   identifier: z.string(),
   arguments: z.string(),
   apiName: z.string(),
-  type: z.enum(['default', 'standalone']).default('default'),
+  type: z.enum(['default', 'standalone', 'builtin']).default('default'),
 });
 
 export const DB_MessageSchema = z.object({

package/src/features/AgentSetting/AgentPlugin/index.tsx

@@ -10,7 +10,7 @@ import { FORM_STYLE } from '@/const/layoutTokens';
 import PluginStore from '@/features/PluginStore';
 import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
 import { pluginHelpers, useToolStore } from '@/store/tool';
-import { pluginSelectors } from '@/store/tool/selectors';
+import { toolSelectors } from '@/store/tool/selectors';
 
 import { useStore } from '../store';
 import AddPluginButton from './AddPluginButton';
@@ -28,7 +28,7 @@ const AgentPlugin = memo(() => {
     s.toggleAgentPlugin,
   ]);
 
-  const installedPlugins = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
+  const installedPlugins = useToolStore(toolSelectors.metaList, isEqual);
   const useFetchInstalledPlugins = useToolStore((s) => s.useFetchInstalledPlugins);
 
   const { isLoading } = useFetchInstalledPlugins();

package/src/features/ChatInput/ActionBar/ModelSwitch.tsx

@@ -1,5 +1,6 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Dropdown } from 'antd';
+import isEqual from 'fast-deep-equal';
 import { BrainCog } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +17,7 @@ const ModelSwitch = memo(() => {
     return [agentSelectors.currentAgentModel(s), s.updateAgentConfig];
   });
 
-  const modelList = useGlobalStore(settingsSelectors.modelList);
+  const modelList = useGlobalStore(settingsSelectors.modelList, isEqual);
 
   return (
     <Dropdown

package/src/features/ChatInput/ActionBar/Token/TokenTag.tsx

@@ -9,7 +9,7 @@ import { chatSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { useToolStore } from '@/store/tool';
-import { pluginSelectors } from '@/store/tool/selectors';
+import { toolSelectors } from '@/store/tool/selectors';
 import { LanguageModel } from '@/types/llm';
 
 const Token = memo(() => {
@@ -28,8 +28,8 @@ const Token = memo(() => {
   const plugins = useSessionStore(agentSelectors.currentAgentPlugins);
 
   const toolsString = useToolStore((s) => {
-    const pluginSystemRoles = pluginSelectors.enabledPluginsSystemRoles(plugins)(s);
-    const schemaNumber = pluginSelectors
+    const pluginSystemRoles = toolSelectors.enabledSystemRoles(plugins)(s);
+    const schemaNumber = toolSelectors
       .enabledSchema(plugins)(s)
       .map((i) => JSON.stringify(i))
       .join('');

package/src/features/ChatInput/ActionBar/Tools/index.tsx

@@ -11,7 +11,7 @@ import PluginStore from '@/features/PluginStore';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { pluginHelpers, useToolStore } from '@/store/tool';
-import { pluginSelectors } from '@/store/tool/selectors';
+import { builtinToolSelectors, pluginSelectors } from '@/store/tool/selectors';
 
 import ToolItem from './ToolItem';
 
@@ -31,7 +31,15 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
 const Tools = memo(() => {
   const { t } = useTranslation('setting');
   const list = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
-  const enablePluginCount = useSessionStore((s) => agentSelectors.currentAgentPlugins(s).length);
+  const builtinList = useToolStore(builtinToolSelectors.metaList, isEqual);
+
+  const enablePluginCount = useSessionStore(
+    (s) =>
+      agentSelectors
+        .currentAgentPlugins(s)
+        .filter((i) => !builtinList.some((b) => b.identifier === i)).length,
+  );
+
   const [open, setOpen] = useState(false);
   const { styles } = useStyles();
 
@@ -42,18 +50,22 @@ const Tools = memo(() => {
         menu={{
           className: styles.menu,
           items: [
-            // {
-            //   children: [
-            //     {
-            //       icon: <Icon icon={PaletteIcon} size={{ fontSize: 16 }} style={{ padding: 4 }} />,
-            //       key: 'dalle3',
-            //       label: <ToolItem identifier={'dalle3'} label={'DALL·E 3'} />,
-            //     },
-            //   ],
-            //   key: 'builtins',
-            //   label: t('tools.builtins.groupName'),
-            //   type: 'group',
-            // },
+            {
+              children: builtinList.map((item) => ({
+                icon: <Avatar avatar={item.meta.avatar} size={24} />,
+                key: item.identifier,
+                label: (
+                  <ToolItem
+                    identifier={item.identifier}
+                    label={item.meta?.title || item.identifier}
+                  />
+                ),
+              })),
+
+              key: 'builtins',
+              label: t('tools.builtins.groupName'),
+              type: 'group',
+            },
             {
               children: [
                 ...list.map((item) => ({

package/src/features/Conversation/ChatList/Messages/Function.tsx

@@ -24,8 +24,8 @@ export const FunctionMessage = memo<ChatMessage>(({ id, content, plugin }) => {
         <PluginRender
           content={content}
           id={id}
+          identifier={plugin?.identifier}
           loading={fcProps.loading}
-          name={plugin?.identifier}
           payload={fcProps.command}
           type={fcProps.type}
         />

package/src/features/Conversation/ChatList/Plugins/Inspector/index.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { pluginHelpers, useToolStore } from '@/store/tool';
-import { pluginSelectors } from '@/store/tool/selectors';
+import { pluginSelectors, toolSelectors } from '@/store/tool/selectors';
 
 import PluginResult from './PluginResultJSON';
 import Settings from './Settings';
@@ -47,9 +47,11 @@ const Inspector = memo<InspectorProps>(
     const { styles } = useStyles();
     const [open, setOpen] = useState(false);
 
-    const pluginMeta = useToolStore(pluginSelectors.getPluginMetaById(id), isEqual);
+    const pluginMeta = useToolStore(toolSelectors.getMetaById(id), isEqual);
+
     const showRightAction = useToolStore(pluginSelectors.isPluginHasUI(id));
     const pluginAvatar = pluginHelpers.getPluginAvatar(pluginMeta);
+
     const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('plugins.loading');
 
     const avatar = pluginAvatar ? (