npm - @lobehub/chat - Versions diffs - 0.1.6 - Mend

@lobehub/chat 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/.changelogrc.js +1 -0
package/.commitlintrc.js +1 -0
package/.editorconfig +16 -0
package/.eslintignore +32 -0
package/.eslintrc.js +6 -0
package/.github/ISSUE_TEMPLATE/1_bug_report.yml +45 -0
package/.github/ISSUE_TEMPLATE/2_feature_request.yml +21 -0
package/.github/ISSUE_TEMPLATE/3_question.yml +15 -0
package/.github/ISSUE_TEMPLATE/4_other.md +7 -0
package/.github/PULL_REQUEST_TEMPLATE.md +17 -0
package/.github/dependabot.yml +17 -0
package/.github/workflows/auto-merge.yml +32 -0
package/.github/workflows/contributor-help.yml +29 -0
package/.github/workflows/issue-check-inactive.yml +22 -0
package/.github/workflows/issue-close-require.yml +46 -0
package/.github/workflows/issue-remove-inactive.yml +25 -0
package/.github/workflows/release.yml +34 -0
package/.github/workflows/test.yml +30 -0
package/.gitpod.yml +3 -0
package/.husky/commit-msg +4 -0
package/.husky/pre-commit +5 -0
package/.i18nrc.js +13 -0
package/.prettierignore +63 -0
package/.prettierrc.js +1 -0
package/.releaserc.js +1 -0
package/.remarkrc.js +1 -0
package/.stylelintrc.js +8 -0
package/CHANGELOG.md +20 -0
package/README.md +147 -0
package/locales/en_US/common.json +41 -0
package/locales/en_US/setting.json +117 -0
package/locales/zh_CN/common.json +41 -0
package/locales/zh_CN/setting.json +117 -0
package/next.config.mjs +32 -0
package/package.json +140 -0
package/public/next.svg +1 -0
package/public/vercel.svg +1 -0
package/scripts/genDefaultLocale.ts +18 -0
package/scripts/genResources.ts +51 -0
package/scripts/toc.ts +7 -0
package/src/const/fetch.ts +1 -0
package/src/const/modelTokens.ts +8 -0
package/src/features/AvatarWithUpload/index.tsx +27 -0
package/src/features/FolderPanel/index.tsx +55 -0
package/src/features/SideBar/index.tsx +35 -0
package/src/helpers/prompt.test.ts +36 -0
package/src/helpers/prompt.ts +36 -0
package/src/helpers/url.ts +17 -0
package/src/layout/index.tsx +57 -0
package/src/layout/style.ts +18 -0
package/src/locales/create.ts +49 -0
package/src/locales/default/common.ts +41 -0
package/src/locales/default/setting.ts +117 -0
package/src/locales/index.ts +5 -0
package/src/locales/options.ts +19 -0
package/src/locales/resources/en_US.ts +9 -0
package/src/locales/resources/index.ts +13 -0
package/src/locales/resources/zh_CN.ts +9 -0
package/src/migrations/FromV0ToV1.ts +12 -0
package/src/migrations/index.ts +13 -0
package/src/pages/_app.page.tsx +13 -0
package/src/pages/_document.page.tsx +70 -0
package/src/pages/api/LangChainStream.ts +95 -0
package/src/pages/api/chain.api.ts +17 -0
package/src/pages/api/openai.api.ts +31 -0
package/src/pages/chat/SessionList/Header.tsx +56 -0
package/src/pages/chat/SessionList/List/SessionItem.tsx +90 -0
package/src/pages/chat/SessionList/List/index.tsx +31 -0
package/src/pages/chat/SessionList/List/style.ts +77 -0
package/src/pages/chat/SessionList/index.tsx +18 -0
package/src/pages/chat/[id]/Config/ConfigCell.tsx +68 -0
package/src/pages/chat/[id]/Config/ReadMode.tsx +63 -0
package/src/pages/chat/[id]/Config/index.tsx +79 -0
package/src/pages/chat/[id]/Conversation/ChatList.tsx +36 -0
package/src/pages/chat/[id]/Conversation/Input.tsx +61 -0
package/src/pages/chat/[id]/Conversation/index.tsx +32 -0
package/src/pages/chat/[id]/Header.tsx +86 -0
package/src/pages/chat/[id]/edit/AgentConfig.tsx +95 -0
package/src/pages/chat/[id]/edit/AgentMeta.tsx +117 -0
package/src/pages/chat/[id]/edit/FormItem.tsx +26 -0
package/src/pages/chat/[id]/edit/Prompt.tsx +68 -0
package/src/pages/chat/[id]/edit/index.page.tsx +62 -0
package/src/pages/chat/[id]/edit/style.ts +42 -0
package/src/pages/chat/[id]/index.page.tsx +40 -0
package/src/pages/chat/index.page.tsx +1 -0
package/src/pages/chat/layout.tsx +51 -0
package/src/pages/index.page.tsx +1 -0
package/src/pages/setting/Header.tsx +27 -0
package/src/pages/setting/SettingForm.tsx +299 -0
package/src/pages/setting/SliderWithInput/index.tsx +40 -0
package/src/pages/setting/ThemeSwatches/ThemeSwatchesNeutral.tsx +33 -0
package/src/pages/setting/ThemeSwatches/ThemeSwatchesPrimary.tsx +33 -0
package/src/pages/setting/ThemeSwatches/index.ts +2 -0
package/src/pages/setting/index.page.tsx +41 -0
package/src/prompts/agent.ts +65 -0
package/src/services/chatModel.ts +34 -0
package/src/services/langChain.ts +18 -0
package/src/services/url.ts +8 -0
package/src/store/middleware/createHashStorage.ts +49 -0
package/src/store/session/index.ts +33 -0
package/src/store/session/initialState.ts +11 -0
package/src/store/session/selectors.ts +3 -0
package/src/store/session/slices/agentConfig/action.ts +226 -0
package/src/store/session/slices/agentConfig/index.ts +3 -0
package/src/store/session/slices/agentConfig/initialState.ts +34 -0
package/src/store/session/slices/agentConfig/selectors.ts +54 -0
package/src/store/session/slices/chat/action.ts +210 -0
package/src/store/session/slices/chat/index.ts +3 -0
package/src/store/session/slices/chat/initialState.ts +12 -0
package/src/store/session/slices/chat/messageReducer.test.ts +70 -0
package/src/store/session/slices/chat/messageReducer.ts +84 -0
package/src/store/session/slices/chat/selectors.ts +83 -0
package/src/store/session/slices/session/action.ts +118 -0
package/src/store/session/slices/session/index.ts +3 -0
package/src/store/session/slices/session/initialState.ts +31 -0
package/src/store/session/slices/session/reducers/session.test.ts +456 -0
package/src/store/session/slices/session/reducers/session.ts +113 -0
package/src/store/session/slices/session/selectors/chat.ts +4 -0
package/src/store/session/slices/session/selectors/index.ts +20 -0
package/src/store/session/slices/session/selectors/list.ts +65 -0
package/src/store/session/store.ts +17 -0
package/src/store/settings/action.ts +40 -0
package/src/store/settings/index.ts +23 -0
package/src/store/settings/initialState.ts +41 -0
package/src/store/settings/selectors.ts +17 -0
package/src/store/settings/store.ts +13 -0
package/src/styles/antdOverride.ts +33 -0
package/src/styles/global.ts +23 -0
package/src/styles/index.ts +6 -0
package/src/types/chatMessage.ts +46 -0
package/src/types/exportConfig.ts +44 -0
package/src/types/global.d.ts +14 -0
package/src/types/i18next.d.ts +8 -0
package/src/types/langchain.ts +34 -0
package/src/types/llm.ts +49 -0
package/src/types/locale.ts +1 -0
package/src/types/meta.ts +26 -0
package/src/types/openai.ts +62 -0
package/src/types/session.ts +59 -0
package/src/utils/VersionController.test.ts +90 -0
package/src/utils/VersionController.ts +64 -0
package/src/utils/compass.ts +94 -0
package/src/utils/fetch.ts +132 -0
package/src/utils/filter.test.ts +120 -0
package/src/utils/filter.ts +29 -0
package/src/utils/uploadFIle.ts +8 -0
package/src/utils/uuid.ts +9 -0
package/tsconfig.json +31 -0
package/vitest.config.ts +11 -0

package/src/pages/_document.page.tsx ADDED Viewed

@@ -0,0 +1,70 @@
+import { StyleProvider, extractStaticStyle } from 'antd-style';
+import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
+class MyDocument extends Document {
+  static async getStaticProps(ctx: DocumentContext) {
+    const page = await ctx.renderPage({
+      enhanceApp: (App) => (props) =>
+        (
+          <StyleProvider cache={extractStaticStyle.cache}>
+            <App {...props} />
+          </StyleProvider>
+        ),
+    });
+    const styles = extractStaticStyle(page.html).map((item) => item.style);
+    const initialProps = await Document.getInitialProps(ctx);
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          {styles}
+        </>
+      ),
+    };
+  }
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link
+            href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/apple-touch-icon.png"
+            rel="apple-touch-icon"
+            sizes="180x180"
+          />
+          <link
+            href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/favicon-32x32.png"
+            rel="icon"
+            sizes="32x32"
+            type="image/png"
+          />
+          <link
+            href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/favicon-16x16.png"
+            rel="icon"
+            sizes="16x16"
+            type="image/png"
+          />
+          <link
+            color="#000000"
+            href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/safari-pinned-tab.svg"
+            rel="mask-icon"
+          />
+          <meta content="LobeHub" name="apple-mobile-web-app-title" />
+          <meta content="LobeHub" name="application-name" />
+          <meta content="#000000" name="msapplication-TileColor" />
+          <meta content="#000000" name="theme-color" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+export default MyDocument;

package/src/pages/api/LangChainStream.ts ADDED Viewed

@@ -0,0 +1,95 @@
+import { LLMChain } from 'langchain/chains';
+import { ChatOpenAI } from 'langchain/chat_models/openai';
+import {
+  AIMessagePromptTemplate,
+  ChatPromptTemplate,
+  HumanMessagePromptTemplate,
+  SystemMessagePromptTemplate,
+} from 'langchain/prompts';
+import { LangChainParams } from '@/types/langchain';
+const isDev = process.env.NODE_ENV === 'development';
+const OPENAI_PROXY_URL = process.env.OPENAI_PROXY_URL;
+export function LangChainStream(payload: LangChainParams) {
+  const { prompts, vars, llm } = payload;
+  // 将 payload 中的消息转换为 ChatOpenAI 所需的 HumanChatMessage、SystemChatMessage 和 AIChatMessage 类型
+  const chatPrompt = ChatPromptTemplate.fromPromptMessages(
+    prompts.map((m) => {
+      switch (m.role) {
+        default:
+        case 'user': {
+          return HumanMessagePromptTemplate.fromTemplate(m.content);
+        }
+        case 'system': {
+          return SystemMessagePromptTemplate.fromTemplate(m.content);
+        }
+        case 'assistant': {
+          return AIMessagePromptTemplate.fromTemplate(m.content);
+        }
+      }
+    }),
+  );
+  // 使用 TextEncoder 将字符串转换为字节数组，以便在 ReadableStream 中发送
+  const encoder = new TextEncoder();
+  // 初始化换行符计数器
+  return new ReadableStream({
+    async start(controller) {
+      let newlineCounter = 0;
+      const chat = new ChatOpenAI(
+        {
+          streaming: true,
+          ...llm,
+          callbacks: [
+            {
+              handleLLMNewToken(token) {
+                // 如果 message 是换行符，且 newlineCounter 小于 2，那么跳过该换行符
+                if (newlineCounter < 2 && token === '\n') {
+                  return;
+                }
+                // 将 message 编码为字节并添加到流中
+                const queue = encoder.encode(token);
+                controller.enqueue(queue);
+                newlineCounter++;
+              },
+            },
+          ],
+          // 暂时设定不重试 ，后续看是否需要支持重试
+          maxRetries: 0,
+        },
+        isDev && OPENAI_PROXY_URL ? { basePath: OPENAI_PROXY_URL } : undefined,
+      );
+      const chain = new LLMChain({
+        callbacks: [
+          {
+            handleChainError(err: Error): Promise<void> | void {
+              console.log(err.message);
+            },
+          },
+        ],
+        llm: chat,
+        prompt: chatPrompt,
+        verbose: true,
+      });
+      try {
+        // 使用转换后的聊天消息作为输入开始聊天
+        await chain.call(vars);
+        // 完成后，关闭流
+        controller.close();
+      } catch (error) {
+        // 如果在执行过程中发生错误，向流发送错误
+        controller.error(error);
+      }
+    },
+  });
+}

package/src/pages/api/chain.api.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { LangChainParams } from '@/types/langchain';
+import { LangChainStream } from './LangChainStream';
+if (!process.env.OPENAI_API_KEY) {
+  throw new Error('Missing env var from OpenAI');
+}
+export const config = {
+  runtime: 'edge',
+};
+export default async function handler(request: Request) {
+  const payload = (await request.json()) as LangChainParams;
+  return new Response(LangChainStream(payload));
+}

package/src/pages/api/openai.api.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+import { Configuration, OpenAIApi } from 'openai-edge';
+import { OpenAIStreamPayload } from '@/types/openai';
+const isDev = process.env.NODE_ENV === 'development';
+const OPENAI_PROXY_URL = process.env.OPENAI_PROXY_URL;
+// Create an OpenAI API client (that's edge friendly!)
+const config = new Configuration({
+  apiKey: process.env.OPENAI_API_KEY,
+});
+const openai = new OpenAIApi(config, isDev && OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined);
+export const runtime = 'edge';
+export default async function handler(req: Request) {
+  // Extract the `messages` from the body of the request
+  const { messages, ...params } = (await req.json()) as OpenAIStreamPayload;
+  console.log(params);
+  const response = await openai.createChatCompletion({
+    stream: true,
+    ...params,
+    messages: messages.map((m) => ({ content: m.content, role: m.role })),
+  });
+  const stream = OpenAIStream(response);
+  return new StreamingTextResponse(stream);
+}

package/src/pages/chat/SessionList/Header.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+import { ActionIcon, Logo, SearchBar } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { MessageSquarePlus } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+import { useSessionStore } from '@/store/session';
+export const useStyles = createStyles(({ css, token }) => ({
+  logo: css`
+    fill: ${token.colorText};
+  `,
+  top: css`
+    position: sticky;
+    top: 0;
+  `,
+}));
+const Header = memo(() => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('common');
+  const [keywords, createSession] = useSessionStore(
+    (s) => [s.searchKeywords, s.createSession],
+    shallow,
+  );
+  return (
+    <Flexbox className={styles.top} gap={16} padding={16}>
+      <Flexbox distribution={'space-between'} horizontal>
+        <Link href={'/'}>
+          <Logo className={styles.logo} size={36} type={'text'} />
+        </Link>
+        <ActionIcon
+          icon={MessageSquarePlus}
+          onClick={createSession}
+          size={{ fontSize: 24 }}
+          style={{ flex: 'none' }}
+          title={t('newAgent')}
+        />
+      </Flexbox>
+      <SearchBar
+        allowClear
+        onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
+        placeholder={t('searchAgentPlaceholder')}
+        spotlight
+        type={'ghost'}
+        value={keywords}
+      />
+    </Flexbox>
+  );
+});
+export default Header;

package/src/pages/chat/SessionList/List/SessionItem.tsx ADDED Viewed

@@ -0,0 +1,90 @@
+import { ActionIcon, Avatar, List } from '@lobehub/ui';
+import { Popconfirm } from 'antd';
+import { X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { FC, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+import { sessionSelectors, useSessionStore } from '@/store/session';
+import { DEFAULT_TITLE } from '@/store/session/slices/agentConfig';
+import { useStyles } from './style';
+const { Item } = List;
+interface SessionItemProps {
+  active: boolean;
+  id: string;
+  loading: boolean;
+}
+const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading }) => {
+  const { t } = useTranslation('common');
+  const { styles, theme, cx } = useStyles();
+  const [title, description, systemRole, avatar, avatarBackground, updateAt, removeSession] =
+    useSessionStore((s) => {
+      const session = sessionSelectors.getSessionById(id)(s);
+      const meta = session.meta;
+      const systemRole = session.config.systemRole;
+      return [
+        meta.title,
+        meta.description,
+        systemRole,
+        sessionSelectors.getAgentAvatar(meta),
+        meta.backgroundColor,
+        session?.updateAt,
+        s.removeSession,
+      ];
+    }, shallow);
+  return (
+    <Flexbox className={styles.container} style={{ position: 'relative' }}>
+      <Item
+        active={active}
+        avatar={
+          <Avatar
+            avatar={avatar}
+            background={avatarBackground}
+            shape="circle"
+            size={46}
+            title={title}
+          />
+        }
+        classNames={{ time: cx('session-time', styles.time) }}
+        date={updateAt}
+        description={description || systemRole}
+        loading={loading}
+        style={{
+          alignItems: 'center',
+          color: theme.colorText,
+        }}
+        title={title || DEFAULT_TITLE}
+      />
+      <Popconfirm
+        arrow={false}
+        cancelText={t('cancel')}
+        okButtonProps={{ danger: true }}
+        okText={t('ok')}
+        onConfirm={(e) => {
+          e?.stopPropagation();
+          removeSession(id);
+        }}
+        overlayStyle={{ width: 280 }}
+        title={t('confirmRemoveSessionItemAlert')}
+      >
+        <ActionIcon
+          className="session-remove"
+          icon={X}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          size={'small'}
+        />
+      </Popconfirm>
+    </Flexbox>
+  );
+}, shallow);
+export default SessionItem;

package/src/pages/chat/SessionList/List/index.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import isEqual from 'fast-deep-equal';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+import { sessionSelectors, useSessionStore } from '@/store/session';
+import SessionItem from './SessionItem';
+import { useStyles } from './style';
+const SessionList = memo(() => {
+  const { styles, cx } = useStyles();
+  const list = useSessionStore((s) => sessionSelectors.chatList(s), isEqual);
+  const [activeId, loading] = useSessionStore(
+    (s) => [s.activeId, s.autocompleteLoading.title],
+    shallow,
+  );
+  return (
+    <Flexbox className={cx(styles.list)}>
+      {list.map(({ id }) => (
+        <Link href={`/chat/${id}`} key={id}>
+          <SessionItem active={activeId === id} id={id} loading={loading && id === activeId} />
+        </Link>
+      ))}
+    </Flexbox>
+  );
+});
+export default SessionList;

package/src/pages/chat/SessionList/List/style.ts ADDED Viewed

@@ -0,0 +1,77 @@
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+export const useStyles = createStyles(({ css, token, cx, stylish }) => {
+  return {
+    active: css`
+      display: flex;
+    `,
+    button: css`
+      position: sticky;
+      z-index: 30;
+      bottom: 0;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      justify-content: center;
+      margin-top: 8px;
+      padding: 12px;
+      background: ${rgba(token.colorBgLayout, 0.5)};
+      backdrop-filter: blur(8px);
+    `,
+    container: css`
+      position: relative;
+      .session-remove {
+        position: absolute;
+        top: 50%;
+        right: 16px;
+        transform: translateY(-50%);
+        width: 16px;
+        height: 16px;
+        font-size: 10px;
+        opacity: 0;
+        background-color: ${token.colorFillTertiary};
+        transition: color 600ms ${token.motionEaseOut}, scale 400ms ${token.motionEaseOut},
+          background-color 100ms ${token.motionEaseOut}, opacity 100ms ${token.motionEaseOut};
+        &:hover {
+          background-color: ${token.colorFill};
+        }
+      }
+      .session-time {
+        opacity: 1;
+        transition: opacity 100ms ${token.motionEaseOut};
+      }
+      &:hover {
+        .session-time {
+          opacity: 0;
+        }
+        .session-remove {
+          opacity: 1;
+        }
+      }
+    `,
+    list: cx(
+      stylish.noScrollbar,
+      css`
+        overflow-x: hidden;
+        overflow-y: scroll;
+      `,
+    ),
+    time: css`
+      align-self: flex-start;
+    `,
+  };
+});

package/src/pages/chat/SessionList/index.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import FolderPanel from '@/features/FolderPanel';
+import Header from './Header';
+import SessionList from './List';
+export const Sessions = memo(() => {
+  return (
+    <FolderPanel>
+      <Flexbox gap={8} height={'100%'}>
+        <Header />
+        <SessionList />
+      </Flexbox>
+    </FolderPanel>
+  );
+});

package/src/pages/chat/[id]/Config/ConfigCell.tsx ADDED Viewed

@@ -0,0 +1,68 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { LucideChevronRight, LucideIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    background: ${token.colorFillQuaternary};
+    border-radius: 6px;
+  `,
+  split: css`
+    border-bottom: 1px solid ${token.colorSplit};
+  `,
+}));
+export interface ConfigItem {
+  icon: LucideIcon;
+  label: string;
+  value?: string | number;
+}
+export type ConfigCellProps = ConfigItem;
+export const ConfigCell = memo<ConfigCellProps>(({ icon, label, value }) => {
+  const { styles } = useStyles();
+  return (
+    <Flexbox
+      className={styles.container}
+      distribution={'space-between'}
+      horizontal
+      padding={'10px 12px'}
+    >
+      <Flexbox gap={8} horizontal>
+        <Icon icon={icon} />
+        <Flexbox>{label}</Flexbox>
+      </Flexbox>
+      {value ?? <Icon icon={LucideChevronRight} />}
+    </Flexbox>
+  );
+});
+export interface CellGroupProps {
+  items: ConfigItem[];
+}
+export const ConfigCellGroup = memo<CellGroupProps>(({ items }) => {
+  const { styles } = useStyles();
+  return (
+    <Flexbox className={styles.container}>
+      {items.map(({ label, icon, value }, index) => (
+        <Flexbox
+          className={items.length === index + 1 ? undefined : styles.split}
+          distribution={'space-between'}
+          horizontal
+          key={label}
+          padding={'10px 12px'}
+        >
+          <Flexbox gap={8} horizontal>
+            <Icon icon={icon} />
+            <Flexbox>{label}</Flexbox>
+          </Flexbox>
+          {value ?? <Icon icon={LucideChevronRight} />}
+        </Flexbox>
+      ))}
+    </Flexbox>
+  );
+});

package/src/pages/chat/[id]/Config/ReadMode.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+import { Avatar } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { LucideBrain, LucideThermometer, WholeWord } from 'lucide-react';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+import { agentSelectors, sessionSelectors, useSessionStore } from '@/store/session';
+import { DEFAULT_TITLE } from '@/store/session/slices/agentConfig';
+import { ConfigCell, ConfigCellGroup } from './ConfigCell';
+const useStyles = createStyles(({ css, token }) => ({
+  desc: css`
+    color: ${token.colorText};
+  `,
+  model: css`
+    color: ${token.colorTextTertiary};
+  `,
+  title: css`
+    font-size: ${token.fontSizeHeading4}px;
+    font-weight: bold;
+  `,
+}));
+const ReadMode = memo(() => {
+  const { styles } = useStyles();
+  const session = useSessionStore(sessionSelectors.currentSessionSafe, isEqual);
+  const avatar = useSessionStore(agentSelectors.currentAgentAvatar, shallow);
+  const title = useSessionStore(agentSelectors.currentAgentTitle, shallow);
+  const model = useSessionStore(agentSelectors.currentAgentModel, shallow);
+  return (
+    <Center gap={12} padding={'32px 16px'} style={{ marginTop: 8 }}>
+      <Avatar avatar={avatar} size={100} />
+      <Flexbox className={styles.title}>{title || DEFAULT_TITLE}</Flexbox>
+      <Flexbox className={styles.model}>{model}</Flexbox>
+      <Flexbox className={styles.desc}>{session.meta.description}</Flexbox>
+      <Flexbox flex={1} gap={12} width={'100%'}>
+        <ConfigCell icon={LucideBrain} label={'提示词'} />
+        <ConfigCellGroup
+          items={[
+            {
+              icon: LucideThermometer,
+              label: '温度',
+              value: session.config.params.temperature,
+            },
+            {
+              icon: WholeWord,
+              label: '会话最大长度',
+              value: session.config.params.max_tokens,
+            },
+          ]}
+        />
+      </Flexbox>
+    </Center>
+  );
+});
+export default ReadMode;