@lobehub/chat 0.74.0 → 0.75.0

package/locales/zh_CN/setting.json

@@ -20,6 +20,64 @@
     "session": "会话设置",
     "sessionWithName": "会话设置 · {{name}}"
   },
+  "llm": {
+    "AzureOpenAI": {
+      "endpoint": {
+        "desc": "从 Azure 门户检查资源时，可在“密钥和终结点”部分中找到此值",
+        "placeholder": "https://docs-test-001.openai.azure.com",
+        "title": "Azure API 地址"
+      },
+      "models": {
+        "desc": "支持的模型",
+        "title": "模型列表"
+      },
+      "title": "Azure OpenAI 设置",
+      "token": {
+        "desc": "从 Azure 门户检查资源时，可在“密钥和终结点”部分中找到此值。 可以使用 KEY1 或 KEY2",
+        "placeholder": "Azure API Key",
+        "title": "API Key"
+      }
+    },
+    "OpenAI": {
+      "azureApiVersion": {
+        "desc": "Azure 的 API 版本，遵循 YYYY-MM-DD 格式，查阅[最新版本](https://learn.microsoft.com/zh-cn/azure/ai-services/openai/reference#chat-completions)",
+        "fetch": "获取列表",
+        "title": "Azure Api Version"
+      },
+      "check": {
+        "button": "检查",
+        "desc": "测试 Api Key 与代理地址是否正确填写",
+        "pass": "检查通过",
+        "title": "连通性检查"
+      },
+      "endpoint": {
+        "desc": "除默认地址外，必须包含 http(s)://",
+        "placeholder": "https://api.openai.com/v1",
+        "title": "接口代理地址"
+      },
+      "models": {
+        "count": "共支持 {{count}} 个模型",
+        "desc": "支持的模型",
+        "fetch": "获取模型列表",
+        "notSupport": "Azure OpenAI 暂不支持查看模型列表",
+        "notSupportTip": "你需要自行确保部署名称与模型名称一致",
+        "refetch": "重新获取模型列表",
+        "title": "模型列表"
+      },
+      "title": "OpenAI 设置",
+      "token": {
+        "desc": "使用自己的 OpenAI Key",
+        "placeholder": "OpenAI API Key",
+        "title": "API Key"
+      },
+      "useAzure": {
+        "desc": "使用 Azure 提供的 OpenAI 服务",
+        "fetch": "获取列表",
+        "title": "Azure OpenAI"
+      }
+    },
+    "waitingForMore": "更多模型正在 <1>计划接入</1> 中，敬请期待 ✨"
+  },
   "settingAgent": {
     "avatar": {
       "title": "头像"
@@ -114,23 +172,12 @@
       "title": "核采样"
     }
   },
-  "settingOpenAI": {
-    "endpoint": {
-      "desc": "除默认地址外，必须包含 http(s)://",
-      "placeholder": "https://api.openai.com/v1",
-      "title": "接口代理地址"
-    },
-    "title": "OpenAI 设置",
-    "token": {
-      "desc": "使用自己的 OpenAI Key",
-      "placeholder": "OpenAI API Key",
-      "title": "API Key"
-    }
-  },
   "settingPlugin": {
     "add": "添加",
     "addTooltip": "添加自定义插件",
+    "clearDeprecated": "移除无效插件",
     "config": "{{id}} 插件配置",
+    "settings": "配置插件市场",
     "title": "插件列表"
   },
   "settingSystem": {
@@ -170,6 +217,7 @@
   },
   "tab": {
     "agent": "默认助手",
-    "common": "通用设置"
+    "common": "通用设置",
+    "llm": "语言模型"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.74.0",
+  "version": "0.75.0",
   "description": "Lobe Chat is an open-source chatbot client using Vercel AI SDK, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -25,8 +25,8 @@
   "scripts": {
     "build": "next build",
     "dev": "next dev -p 3010",
-    "i18n": "npm run i18n:toc && lobe-i18n",
-    "i18n:toc": "ts-node --project ./tsconfig.json scripts/toc.ts",
+    "i18n": "npm run i18n:workflow && lobe-i18n",
+    "i18n:workflow": "ts-node --project ./tsconfig.json scripts/i18nWorkflow/index.ts",
     "lint": "npm run lint:ts && npm run lint:style && npm run type-check && npm run lint:circular",
     "lint:circular": "dpdm src/**/*.ts  --warning false  --tree false  --exit-code circular:1  -T true",
     "lint:md": "remark . --quiet --frail --output",
@@ -89,7 +89,7 @@
     "lucide-react": "latest",
     "nanoid": "^4",
     "next": "13.4.7",
-    "openai": "^4.5.0",
+    "openai": "^4.6.0",
     "polished": "^4",
     "react": "^18",
     "react-dom": "^18",
@@ -100,6 +100,7 @@
     "swr": "^2",
     "systemjs": "^6.14.2",
     "ts-md5": "^1",
+    "url-join": "^5",
     "use-merge-value": "^1",
     "utility-types": "^3",
     "uuid": "^9",

package/scripts/i18nWorkflow/const.ts

@@ -0,0 +1,19 @@
+import { readdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import i18nConfig from '../../.i18nrc';
+
+export const root = resolve(__dirname, '../..');
+export const localesDir = resolve(root, i18nConfig.output);
+export const localeDir = (locale: string) => resolve(localesDir, locale);
+export const localeDirJsonList = (locale: string) =>
+  readdirSync(localeDir(locale)).filter((name) => name.includes('.json'));
+export const srcLocalesDir = resolve(root, './src/locales');
+export const entryLocaleJsonFilepath = (file: string) =>
+  resolve(localesDir, i18nConfig.entryLocale, file);
+export const outputLocaleJsonFilepath = (locale: string, file: string) =>
+  resolve(localesDir, locale, file);
+export const srcLocalesResources = resolve(root, srcLocalesDir, 'resources');
+export const localesResourcesFilepath = (locale: string) => resolve(srcLocalesResources, locale);
+
+export { default as i18nConfig } from '../../.i18nrc';

package/scripts/i18nWorkflow/genDefaultLocale.ts

@@ -0,0 +1,19 @@
+import { consola } from 'consola';
+import { colors } from 'consola/utils';
+
+import { entryLocaleJsonFilepath, i18nConfig, localesResourcesFilepath } from './const';
+import { tagWhite, writeJSON } from './utils';
+
+export const genDefaultLocale = () => {
+  consola.info(`Default locale is ${i18nConfig.entryLocale}...`);
+
+  const resources = require(localesResourcesFilepath(i18nConfig.entryLocale));
+  const data = Object.entries(resources.default);
+  consola.start(`Generate default locale json, found ${data.length} namespaces...`);
+
+  for (const [ns, value] of data) {
+    const filepath = entryLocaleJsonFilepath(`${ns}.json`);
+    writeJSON(filepath, value);
+    consola.success(tagWhite(ns), colors.gray(filepath));
+  }
+};

package/scripts/i18nWorkflow/genDiff.ts

@@ -0,0 +1,50 @@
+import { consola } from 'consola';
+import { colors } from 'consola/utils';
+import { existsSync } from 'node:fs';
+
+import {
+  entryLocaleJsonFilepath,
+  i18nConfig,
+  localesResourcesFilepath,
+  outputLocaleJsonFilepath,
+} from './const';
+import { diff, readJSON, tagWhite, tagYellow, unset, writeJSON } from './utils';
+
+export const genDiff = () => {
+  consola.start(`Diff between Dev/Prod local...`);
+
+  const resources = require(localesResourcesFilepath(i18nConfig.entryLocale));
+  const data = Object.entries(resources.default);
+
+  for (const [ns, devJSON] of data) {
+    const filepath = entryLocaleJsonFilepath(`${ns}.json`);
+    if (!existsSync(filepath)) continue;
+    const prodJSON = readJSON(filepath);
+
+    const diffKeys = diff(devJSON, prodJSON);
+
+    if (diffKeys.length === 0) {
+      consola.success(tagWhite(ns), colors.gray(filepath));
+      continue;
+    }
+
+    consola.warn(tagYellow(ns), diffKeys);
+
+    const clearLocals = [];
+
+    for (const locale of [i18nConfig.entryLocale, ...i18nConfig.outputLocales]) {
+      const localeFilepath = outputLocaleJsonFilepath(locale, `${ns}.json`);
+      if (!existsSync(localeFilepath)) continue;
+      const localeJSON = readJSON(localeFilepath);
+
+      for (const key of diffKeys) {
+        unset(localeJSON, key);
+      }
+
+      writeJSON(localeFilepath, localeJSON);
+      clearLocals.push(locale);
+    }
+    consola.info('clear', clearLocals);
+    consola.success(tagWhite(ns), colors.gray(filepath));
+  }
+};

package/scripts/i18nWorkflow/genResources.ts

@@ -0,0 +1,26 @@
+import { consola } from 'consola';
+import { colors } from 'consola/utils';
+import { writeFileSync } from 'node:fs';
+
+import { i18nConfig, localeDirJsonList, localesResourcesFilepath } from './const';
+import { genResourcesContent, genToc, tagBlue, tagGreen } from './utils';
+
+const locales = [i18nConfig.entryLocale, ...i18nConfig.outputLocales];
+
+export const genResources = () => {
+  consola.start(`Generate locale resources and types, found ${locales.length} locales...`);
+
+  for (const locale of locales) {
+    const files = localeDirJsonList(locale);
+    const toc = genToc(files, locale);
+
+    const filepath = localesResourcesFilepath(`${locale}.ts`);
+    writeFileSync(filepath, toc);
+    consola.success(tagBlue(locale), colors.gray(filepath));
+  }
+
+  const indexFilepath = localesResourcesFilepath(`index.ts`);
+  writeFileSync(indexFilepath, genResourcesContent(locales));
+
+  consola.success(tagGreen('INDEX'), colors.gray(indexFilepath));
+};

package/scripts/i18nWorkflow/index.ts

@@ -0,0 +1,15 @@
+import { genDefaultLocale } from './genDefaultLocale';
+import { genDiff } from './genDiff';
+import { genResources } from './genResources';
+import { split } from './utils';
+
+split('DIFF ANALYSIS');
+genDiff();
+
+split('GENERATE DEFAULT LOCALE');
+genDefaultLocale();
+
+split('GENERATE RESOURCE & TOC');
+genResources();
+
+split('GENERATE I18N FILES');

package/scripts/i18nWorkflow/utils.ts

@@ -0,0 +1,85 @@
+import { consola } from 'consola';
+import { colors } from 'consola/utils';
+import { tocForResources } from 'i18next-resources-for-ts';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import i18nConfig from '../../.i18nrc';
+import { srcLocalesResources } from './const';
+
+export const readJSON = (filePath: string) => {
+  const data = readFileSync(filePath, 'utf8');
+  return JSON.parse(data);
+};
+
+export const writeJSON = (filePath: string, data: any) => {
+  const jsonStr = JSON.stringify(data, null, 2);
+  writeFileSync(filePath, jsonStr, 'utf8');
+};
+
+export const genResourcesContent = (locales: string[]) => {
+  let index = '';
+  let indexObj = '';
+
+  for (const locale of locales) {
+    index += `import ${locale} from "./${locale}";\n`;
+    indexObj += `   "${locale.replace('_', '-')}": ${locale},\n`;
+  }
+
+  return `${index}
+const resources = {
+${indexObj}} as const;
+export default resources;
+export const defaultResources = ${i18nConfig.entryLocale};
+export type Resources = typeof resources;
+export type DefaultResources = typeof defaultResources;
+export type Namespaces = keyof DefaultResources;
+export type Locales = keyof Resources;
+`;
+};
+
+export const genNamespaceList = (files: string[], locale: string) => {
+  return files.map((file) => ({
+    name: file.replace('.json', ''),
+    path: resolve(i18nConfig.output, locale, file),
+  }));
+};
+
+export const genToc = (files: string[], locale: string) => {
+  const ns = genNamespaceList(files, locale);
+  let toc = tocForResources(ns, srcLocalesResources).replaceAll('\\', '/');
+  if (locale === i18nConfig.entryLocale) {
+    toc = toc.replaceAll('.json', '').replaceAll('../../../locales/zh_CN', '../default');
+  }
+  return toc;
+};
+
+export const diff = (obj1: any, obj2: any, prefix: string = ''): string[] => {
+  let result: string[] = [];
+  for (const key in obj1) {
+    if (!obj2[key]) continue;
+    if (typeof obj1[key] === 'object' && obj1[key] !== null && obj2[key]) {
+      result = result.concat(diff(obj1[key], obj2[key], `${key}.`));
+    } else if (obj1[key] !== obj2[key]) {
+      result.push(`${prefix}${key}`);
+    }
+  }
+  return result;
+};
+
+export const unset = (obj: any, key: string) => {
+  const keys = key.split('.');
+  const lastKey = keys.pop();
+  const lastObj = keys.reduce((obj, key) => (obj[key] = obj[key] || {}), obj);
+  if (lastKey) delete lastObj[lastKey];
+};
+
+export const tagBlue = (text: string) => colors.bgBlueBright(colors.black(` ${text} `));
+export const tagYellow = (text: string) => colors.bgYellowBright(colors.black(` ${text} `));
+export const tagGreen = (text: string) => colors.bgGreenBright(colors.black(` ${text} `));
+export const tagWhite = (text: string) => colors.bgWhiteBright(colors.black(` ${text} `));
+
+export const split = (name: string) => {
+  consola.log('');
+  consola.log(colors.gray(`========================== ${name} ==============================`));
+};

package/src/const/layoutTokens.ts

@@ -5,8 +5,10 @@ export const MOBILE_NABBAR_HEIGHT = 44;
 export const MOBILE_TABBAR_HEIGHT = 48;
 export const CHAT_TEXTAREA_HEIGHT = 200;
 export const CHAT_SIDEBAR_WIDTH = 280;
+export const MARKET_SIDEBAR_WIDTH = 400;
 export const FOLDER_WIDTH = 256;
+export const MAX_WIDTH = 1024;
 export const FORM_STYLE: FormProps = {
   itemMinWidth: 'max(30%,240px)',
-  style: { maxWidth: 1024, width: '100%' },
+  style: { maxWidth: MAX_WIDTH, width: '100%' },
 };

package/src/const/market.ts

@@ -0,0 +1,15 @@
+import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
+import { AgentsMarketItem } from '@/types/market';
+
+import { DEFAULT_AGENT_META } from './meta';
+
+export const DEFAULT_AGENTS_MARKET_ITEM: AgentsMarketItem = {
+  author: '',
+  config: DEFAULT_AGENT_CONFIG,
+  createAt: Date.now().toString(),
+  homepage: '',
+  identifier: '',
+  manifest: '',
+  meta: DEFAULT_AGENT_META,
+  schemaVersion: 1,
+};

package/src/const/url.ts

@@ -1,3 +1,5 @@
+import urlJoin from 'url-join';
+
 import { localeOptions } from '@/locales/options';
 import { Locales } from '@/locales/resources';
 
@@ -11,15 +13,38 @@ export const FEEDBACK = pkg.bugs.url;
 export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 
 export const PLUGINS_INDEX_URL =
-  process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com/index';
+  process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com';
+
+export const DEFAULT_LANG = 'en-US';
 
-export const getPluginIndexJSON = (lang: Locales = 'en-US', baseUrl = PLUGINS_INDEX_URL) => {
-  if (lang === 'en-US' || !localeOptions.map((o) => o.value).includes(lang)) return baseUrl;
+export const checkLang = (lang: Locales) => {
+  return lang === DEFAULT_LANG || !localeOptions.map((o) => o.value).includes(lang);
+};
+export const getPluginIndexJSON = (lang: Locales = DEFAULT_LANG, baseUrl = PLUGINS_INDEX_URL) => {
+  if (checkLang(lang)) return baseUrl;
 
-  return `${baseUrl}.${lang}.json`;
+  return urlJoin(baseUrl, `index.${lang}.json`);
 };
 
 export const AGENTS_INDEX_URL = process.env.AGENTS_INDEX_URL ?? 'https://chat-agents.lobehub.com';
 
+export const getAgentIndexJSON = (lang: Locales = DEFAULT_LANG, baseUrl = AGENTS_INDEX_URL) => {
+  if (checkLang(lang)) return baseUrl;
+
+  return urlJoin(baseUrl, `index.${lang}.json`);
+};
+
+export const getAgentJSON = (
+  identifier: string,
+  lang: Locales = DEFAULT_LANG,
+  baseUrl = AGENTS_INDEX_URL,
+) => {
+  if (checkLang(lang)) return urlJoin(baseUrl, `${identifier}.json`);
+
+  return urlJoin(baseUrl, `${identifier}.${lang}.json`);
+};
+
+export const AGENTS_INDEX_GITHUB = 'https://github.com/lobehub/lobe-chat-agents';
+
 export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID, mobile?: boolean) =>
   mobile ? `/chat/mobile#session=${id}` : `/chat#session=${id}`;

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

@@ -1,4 +1,4 @@
-import { Form, ItemGroup, SliderWithInput } from '@lobehub/ui';
+import { Form, ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
 import { ConfigProvider, Input, Select, Switch } from 'antd';
 import { useTheme, useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -7,7 +7,6 @@ import { BrainCog, LayoutList, MessageSquare, MessagesSquare } from 'lucide-reac
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import SelectWithImg from '@/components/SelectWithImg';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { LanguageModel } from '@/types/llm';
 import { LobeAgentConfigKeys } from '@/types/session';

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

@@ -62,7 +62,7 @@ const MarketSettingModal = memo<MarketSettingModalProps>(({ open, onOpenChange }
                 <Input
                   defaultValue={PLUGINS_INDEX_URL}
                   disabled
-                  placeholder={'https://xxxxx.com/index.json'}
+                  placeholder={'https://xxxxx.com'}
                 />
               </Tooltip>
             </Form.Item>

package/src/features/AgentSetting/store/initialState.ts

@@ -19,7 +19,7 @@ export const initialState: State = {
     avatar: false,
     backgroundColor: false,
     description: false,
-    tag: false,
+    tags: false,
     title: false,
   },
 

package/src/features/MobileTabBar/index.tsx

@@ -1,6 +1,6 @@
 import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { MessageSquare, Sticker } from 'lucide-react';
+import { Bot, MessageSquare } from 'lucide-react';
 import Router from 'next/router';
 import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
@@ -33,7 +33,7 @@ export default memo<{ className?: string }>(({ className }) => {
         title: t('tab.chat'),
       },
       {
-        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Sticker} />,
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Bot} />,
         key: 'market',
         onClick: () => {
           Router.push({ hash: '', pathname: `/market` });

package/src/features/SideBar/TopActions.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon } from '@lobehub/ui';
-import { MessageSquare, Sticker } from 'lucide-react';
+import { Bot, MessageSquare } from 'lucide-react';
 import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -32,7 +32,7 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
       />
       <ActionIcon
         active={tab === 'market'}
-        icon={Sticker}
+        icon={Bot}
         onClick={() => {
           if (Router.asPath.startsWith('/market')) return;
           Router.push('/market');

package/src/locales/default/market.ts

@@ -0,0 +1,12 @@
+export default {
+  addAgent: '添加助手',
+  search: {
+    placeholder: '搜索助手名称介绍或关键词...',
+  },
+  sidebar: {
+    comment: '讨论区',
+    prompt: '提示词',
+    title: '助手详情',
+  },
+  submitAgent: '提交助手',
+};

package/src/locales/resources/en_US.ts

@@ -1,6 +1,7 @@
 import common from '../../../locales/en_US/common.json';
 import empty from '../../../locales/en_US/empty.json';
 import error from '../../../locales/en_US/error.json';
+import market from '../../../locales/en_US/market.json';
 import plugin from '../../../locales/en_US/plugin.json';
 import setting from '../../../locales/en_US/setting.json';
 import welcome from '../../../locales/en_US/welcome.json';
@@ -9,6 +10,7 @@ const resources = {
   common,
   empty,
   error,
+  market,
   plugin,
   setting,
   welcome,

package/src/locales/resources/ru_RU.ts

@@ -1,6 +1,7 @@
 import common from '../../../locales/ru_RU/common.json';
 import empty from '../../../locales/ru_RU/empty.json';
 import error from '../../../locales/ru_RU/error.json';
+import market from '../../../locales/ru_RU/market.json';
 import plugin from '../../../locales/ru_RU/plugin.json';
 import setting from '../../../locales/ru_RU/setting.json';
 import welcome from '../../../locales/ru_RU/welcome.json';
@@ -9,6 +10,7 @@ const resources = {
   common,
   empty,
   error,
+  market,
   plugin,
   setting,
   welcome,

package/src/locales/resources/zh_CN.ts

@@ -1,6 +1,7 @@
 import common from '../default/common';
 import empty from '../default/empty';
 import error from '../default/error';
+import market from '../default/market';
 import plugin from '../default/plugin';
 import setting from '../default/setting';
 import welcome from '../default/welcome';
@@ -9,6 +10,7 @@ const resources = {
   common,
   empty,
   error,
+  market,
   plugin,
   setting,
   welcome,

package/src/pages/chat/features/Conversation/Input/{Action.tsx → ActionBar/ActionLeft.tsx}

@@ -9,7 +9,7 @@ import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { LanguageModel } from '@/types/llm';
 
-const InputActions = memo(() => {
+const ActionLeft = memo(() => {
   const { t } = useTranslation('setting');
 
   const [model, temperature, historyCount, unlimited, updateAgentConfig] = useSessionStore((s) => {
@@ -107,4 +107,4 @@ const InputActions = memo(() => {
   );
 });
 
-export default InputActions;
+export default ActionLeft;

package/src/pages/chat/features/Conversation/Input/ActionBar/ActionRight.tsx

@@ -0,0 +1,36 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Popconfirm } from 'antd';
+import { Eraser } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+import SaveTopic from '../Footer/SaveTopic';
+
+const ActionsRight = memo(() => {
+  const { t } = useTranslation('setting');
+  const [clearMessage] = useSessionStore((s) => [s.clearMessage, s.updateAgentConfig]);
+
+  return (
+    <>
+      <SaveTopic />
+      <Popconfirm
+        cancelText={t('cancel', { ns: 'common' })}
+        okButtonProps={{ danger: true }}
+        okText={t('ok', { ns: 'common' })}
+        onConfirm={() => clearMessage()}
+        placement={'topRight'}
+        title={t('confirmClearCurrentMessages', { ns: 'common' })}
+      >
+        <ActionIcon
+          icon={Eraser}
+          placement={'bottom'}
+          title={t('clearCurrentMessages', { ns: 'common' })}
+        />
+      </Popconfirm>
+    </>
+  );
+});
+
+export default ActionsRight;

package/src/pages/chat/features/Conversation/Input/Desktop.tsx

@@ -0,0 +1,40 @@
+import { DraggablePanel } from '@lobehub/ui';
+import { ReactNode, memo } from 'react';
+
+import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+
+interface ChatInputDesktopLayoutProps {
+  children: ReactNode;
+  expand?: boolean;
+}
+
+const ChatInputDesktopLayout = memo<ChatInputDesktopLayoutProps>(({ children, expand }) => {
+  const [inputHeight, updatePreference] = useGlobalStore((s) => [
+    s.preference.inputHeight,
+    s.updatePreference,
+  ]);
+
+  return (
+    <DraggablePanel
+      expandable={false}
+      fullscreen={expand}
+      headerHeight={HEADER_HEIGHT}
+      minHeight={CHAT_TEXTAREA_HEIGHT}
+      onSizeChange={(_, size) => {
+        if (!size) return;
+
+        updatePreference({
+          inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
+        });
+      }}
+      placement="bottom"
+      size={{ height: inputHeight, width: '100%' }}
+      style={{ zIndex: 10 }}
+    >
+      {children}
+    </DraggablePanel>
+  );
+});
+
+export default ChatInputDesktopLayout;