@lobehub/chat 0.114.9 → 0.115.1

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.115.1](https://github.com/lobehub/lobe-chat/compare/v0.115.0...v0.115.1)
+
+<sup>Released on **2023-12-22**</sup>
+
+#### 💄 Styles
+
+- **misc**: Lock ui version to fix setting form style.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Lock ui version to fix setting form style ([6cdf548](https://github.com/lobehub/lobe-chat/commit/6cdf548))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.115.0](https://github.com/lobehub/lobe-chat/compare/v0.114.9...v0.115.0)
+
+<sup>Released on **2023-12-22**</sup>
+
+#### ✨ Features
+
+- **misc**: Support Dall·E 3.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Support Dall·E 3, closes [#697](https://github.com/lobehub/lobe-chat/issues/697) ([e39d199](https://github.com/lobehub/lobe-chat/commit/e39d199))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.114.9](https://github.com/lobehub/lobe-chat/compare/v0.114.8...v0.114.9)
 
 <sup>Released on **2023-12-22**</sup>

package/locales/de-DE/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "Automatisch generieren",
+    "generate": "Generieren",
+    "generating": "Generiert",
+    "images": "Bilder:"
+  }
+}

package/locales/en-US/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "Auto Generate",
+    "generate": "Generate",
+    "generating": "Generating...",
+    "images": "Images:"
+  }
+}

package/locales/es-ES/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "Auto-generar",
+    "generate": "Generar",
+    "generating": "Generando...",
+    "images": "Imágenes:"
+  }
+}

package/locales/fr-FR/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "Auto-générer",
+    "generate": "Générer",
+    "generating": "En cours de génération...",
+    "images": "Images :"
+  }
+}

package/locales/it-IT/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "Auto-generato",
+    "generate": "Genera",
+    "generating": "Generazione in corso...",
+    "images": "Immagini:"
+  }
+}

package/locales/ja-JP/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "自動生成",
+    "generate": "生成する",
+    "generating": "生成中...",
+    "images": "画像:"
+  }
+}

package/locales/ko-KR/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "자동 생성",
+    "generate": "생성",
+    "generating": "생성 중...",
+    "images": "이미지:"
+  }
+}

package/locales/nl-NL/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "Automatisch genereren",
+    "generate": "Genereren",
+    "generating": "Bezig met genereren...",
+    "images": "Afbeeldingen:"
+  }
+}

package/locales/pl-PL/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "Automatyczne generowanie",
+    "generate": "Generuj",
+    "generating": "Generowanie...",
+    "images": "Obrazy:"
+  }
+}

package/locales/pt-BR/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "Auto gerar",
+    "generate": "Gerar",
+    "generating": "Gerando...",
+    "images": "Imagens:"
+  }
+}

package/locales/ru-RU/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "Автогенерация",
+    "generate": "Создать",
+    "generating": "Создание...",
+    "images": "Изображения:"
+  }
+}

package/locales/tr-TR/tool.json

@@ -0,0 +1,8 @@
+{
+  "dalle": {
+    "autoGenerate": "Otomatik Oluştur",
+    "generate": "Oluştur",
+    "generating": "Oluşturuluyor...",
+    "images": "Görseller:"
+  }
+}

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/tool.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.114.9",
+  "version": "0.115.1",
   "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",
@@ -76,7 +76,7 @@
     "@lobehub/chat-plugin-sdk": "latest",
     "@lobehub/chat-plugins-gateway": "latest",
     "@lobehub/tts": "latest",
-    "@lobehub/ui": "latest",
+    "@lobehub/ui": "~1.121.0",
     "@vercel/analytics": "^1",
     "ahooks": "^3",
     "ai": "^2.2.22",

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({