@lobehub/chat 1.0.0

package/src/pages/chat/[id]/Header.tsx

@@ -0,0 +1,86 @@
+import { ActionIcon, Avatar, ChatHeader } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ArchiveIcon, LucideEdit, MoreVerticalIcon, Share2Icon } from 'lucide-react';
+import Router from 'next/router';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { sessionSelectors, useSessionStore } from '@/store/session';
+
+const useStyles = createStyles(({ css, token }) => ({
+  desc: css`
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+  title: css`
+    font-weight: bold;
+    color: ${token.colorText};
+  `,
+}));
+const Header = memo(() => {
+  const { t } = useTranslation('common');
+  const [meta, id] = useSessionStore((s) => {
+    const chat = sessionSelectors.currentSession(s);
+    return [chat?.meta, s.activeId];
+  }, shallow);
+
+  const [
+    // genShareUrl,
+
+    toggleConfig,
+  ] = useSessionStore(
+    (s) => [
+      // s.genShareUrl,
+      s.toggleConfig,
+    ],
+    shallow,
+  );
+
+  const { styles } = useStyles();
+  return (
+    <ChatHeader
+      left={
+        <>
+          <Avatar avatar={meta && sessionSelectors.getAgentAvatar(meta)} size={40} title={'123'} />
+          <Flexbox>
+            <Flexbox className={styles.title}>{meta?.title || t('defaultAgent')}</Flexbox>
+            <Flexbox className={styles.desc}>{meta?.description || t('noDescription')}</Flexbox>
+          </Flexbox>
+        </>
+      }
+      right={
+        id && (
+          <>
+            <ActionIcon
+              icon={Share2Icon}
+              onClick={() => {
+                // genShareUrl();
+              }}
+              size={{ fontSize: 24 }}
+              title={t('share')}
+            />
+            <ActionIcon icon={ArchiveIcon} size={{ fontSize: 24 }} title={t('archive')} />
+            <ActionIcon
+              icon={LucideEdit}
+              onClick={() => {
+                Router.push(`/chat/${id}/edit`);
+              }}
+              size={{ blockSize: 32, fontSize: 20 }}
+              title={t('edit')}
+            />
+            <ActionIcon
+              icon={MoreVerticalIcon}
+              onClick={() => toggleConfig()}
+              size={{ fontSize: 24 }}
+              title={t('sessionSetting')}
+            />
+          </>
+        )
+      }
+    />
+  );
+});
+
+export default Header;

package/src/pages/chat/[id]/edit/AgentConfig.tsx

@@ -0,0 +1,95 @@
+import { Collapse, InputNumber, Segmented, Slider } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { agentSelectors, useSessionStore } from '@/store/session';
+import { LanguageModel } from '@/types/llm';
+
+import { FormItem } from './FormItem';
+import Prompt from './Prompt';
+import { useStyles } from './style';
+
+const AgentConfig = () => {
+  const { t } = useTranslation('common');
+
+  const { styles, theme } = useStyles();
+
+  const config = useSessionStore(agentSelectors.currentAgentConfigSafe, isEqual);
+
+  const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
+
+  return (
+    <>
+      <Flexbox
+        align={'center'}
+        distribution={'space-between'}
+        horizontal
+        paddingBlock={12}
+        style={{
+          borderBottom: `1px solid ${theme.colorBorder}`,
+        }}
+      >
+        <Flexbox className={styles.profile}> {t('modelConfig')}</Flexbox>
+      </Flexbox>
+      <Flexbox gap={24}>
+        <FormItem label={t('agentModel')}>
+          <Segmented
+            block
+            onChange={(value) => {
+              updateAgentConfig({ model: value as LanguageModel });
+            }}
+            options={Object.values(LanguageModel).map((value) => ({
+              label: t(value),
+              value,
+            }))}
+            size={'large'}
+            value={config.model}
+          />
+        </FormItem>
+        <Prompt />
+        <Collapse
+          activeKey={['advanceSettings']}
+          bordered={false}
+          className={styles.title}
+          expandIconPosition={'end'}
+          items={[
+            {
+              children: (
+                <Flexbox paddingBlock={16}>
+                  <FormItem label={t('modelTemperature')}>
+                    <Flexbox gap={16} horizontal>
+                      <Slider
+                        max={1}
+                        min={0}
+                        onChange={(value) => {
+                          updateAgentConfig({ params: { temperature: value } });
+                        }}
+                        step={0.1}
+                        style={{ flex: 1 }}
+                        value={Number(config.params.temperature)}
+                      />
+                      <InputNumber
+                        max={1}
+                        min={0}
+                        onChange={(value) => {
+                          if (value) updateAgentConfig({ params: { temperature: value } });
+                        }}
+                        value={config.params.temperature}
+                      />
+                    </Flexbox>
+                  </FormItem>
+                </Flexbox>
+              ),
+              key: 'advanceSettings',
+              label: t('advanceSettings'),
+            },
+          ]}
+        />
+      </Flexbox>
+    </>
+  );
+};
+
+export default AgentConfig;

package/src/pages/chat/[id]/edit/AgentMeta.tsx

@@ -0,0 +1,117 @@
+import { ActionIcon, Avatar, Input, Tooltip } from '@lobehub/ui';
+import { Button, Collapse } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { LucideSparkles } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { agentSelectors, useSessionStore } from '@/store/session';
+
+import { FormItem } from './FormItem';
+import { useStyles } from './style';
+
+const AgentMeta = () => {
+  const { t } = useTranslation('common');
+
+  const { styles, theme } = useStyles();
+
+  const metaData = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
+
+  const [
+    autocompleteMeta,
+    autocompleteSessionAgentMeta,
+    loading,
+    updateAgentMeta,
+    id,
+    hasSystemRole,
+  ] = useSessionStore(
+    (s) => [
+      s.autocompleteMeta,
+      s.autocompleteSessionAgentMeta,
+      s.autocompleteLoading,
+      s.updateAgentMeta,
+      s.activeId,
+      agentSelectors.hasSystemRole(s),
+    ],
+    shallow,
+  );
+
+  const basic = [
+    { key: 'title', label: t('agentName'), placeholder: t('agentNamePlaceholder') },
+    {
+      key: 'description',
+      label: t('agentDescription'),
+      placeholder: t('agentDescriptionPlaceholder'),
+    },
+    // { key: 'tag', label: t('agentTag'), placeholder: t('agentTagPlaceholder') },
+  ];
+
+  return (
+    <Collapse
+      defaultActiveKey={hasSystemRole ? ['meta'] : []}
+      items={[
+        {
+          children: (
+            <Flexbox gap={80} horizontal style={{ marginTop: 16 }}>
+              <Flexbox flex={1} gap={24}>
+                {basic.map((item) => (
+                  <FormItem key={item.key} label={item.label}>
+                    <Input
+                      onChange={(e) => {
+                        updateAgentMeta({ [item.key]: e.target.value });
+                      }}
+                      placeholder={item.placeholder}
+                      suffix={
+                        <ActionIcon
+                          icon={LucideSparkles}
+                          loading={loading[item.key as keyof typeof loading]}
+                          onClick={() => {
+                            autocompleteMeta(item.key as keyof typeof metaData);
+                          }}
+                          size={'small'}
+                          style={{
+                            color: theme.purple,
+                          }}
+                          title={t('autoGenerate')}
+                        />
+                      }
+                      type={'block'}
+                      value={metaData[item.key as keyof typeof metaData]}
+                    />
+                  </FormItem>
+                ))}
+              </Flexbox>
+              <FormItem label={t('agentAvatar')}>
+                <Avatar avatar={metaData.avatar} size={200} />
+              </FormItem>
+            </Flexbox>
+          ),
+          className: styles.collapseHeader,
+          extra: (
+            <Tooltip title={t('autoGenerateTooltip')}>
+              <Button
+                disabled={!hasSystemRole}
+                loading={Object.values(loading).some((i) => !!i)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  console.log(id);
+                  if (!id) return;
+
+                  autocompleteSessionAgentMeta(id, true);
+                }}
+                size={'large'}
+              >
+                {t('autoGenerate')}
+              </Button>
+            </Tooltip>
+          ),
+          key: 'meta',
+          label: <Flexbox className={styles.profile}>{t('profile')}</Flexbox>,
+        },
+      ]}
+    />
+  );
+};
+
+export default AgentMeta;

package/src/pages/chat/[id]/edit/FormItem.tsx

@@ -0,0 +1,26 @@
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  header: css``,
+  title: css`
+    color: ${token.colorTextSecondary};
+  `,
+}));
+
+interface FormItemProps {
+  children: ReactNode;
+  label: string;
+}
+
+export const FormItem = memo<FormItemProps>(({ label, children }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox className={styles.header} gap={12}>
+      <Flexbox className={styles.title}>{label}</Flexbox>
+      <Flexbox>{children}</Flexbox>
+    </Flexbox>
+  );
+});

package/src/pages/chat/[id]/edit/Prompt.tsx

@@ -0,0 +1,68 @@
+import { EditableMessage } from '@lobehub/ui';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { agentSelectors, useSessionStore } from '@/store/session';
+
+import { FormItem } from './FormItem';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  input: css`
+    padding: 12px;
+    background: ${token.colorFillTertiary};
+    border: 1px solid ${token.colorPrimaryBorder};
+    border-radius: 8px;
+  `,
+  markdown: css`
+    padding: 12px;
+    background: ${token.colorFillTertiary};
+  `,
+}));
+
+const Prompt = () => {
+  const { t } = useTranslation('common');
+
+  const [editing, setEditing] = useState(false);
+  const { styles } = useStyles();
+
+  const systemRole = useSessionStore((s) => {
+    const config = agentSelectors.currentAgentConfigSafe(s);
+    return config.systemRole;
+  }, shallow);
+
+  const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
+
+  return (
+    <FormItem label={t('agentPrompt')}>
+      <Flexbox gap={16}>
+        <EditableMessage
+          classNames={styles}
+          editing={editing}
+          onChange={(e) => {
+            updateAgentConfig({ systemRole: e });
+          }}
+          onEditingChange={setEditing}
+          value={systemRole}
+        />
+        {!editing && (
+          <Flexbox direction={'horizontal-reverse'}>
+            <Button
+              onClick={() => {
+                setEditing(true);
+              }}
+              type={'primary'}
+            >
+              {t('edit')}
+            </Button>
+          </Flexbox>
+        )}
+      </Flexbox>
+    </FormItem>
+  );
+};
+
+export default Prompt;

package/src/pages/chat/[id]/edit/index.page.tsx

@@ -0,0 +1,62 @@
+import { ChatHeader } from '@lobehub/ui';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import Router from 'next/router';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ChatLayout from '../../layout';
+import AgentConfig from './AgentConfig';
+import AgentMeta from './AgentMeta';
+
+const useStyles = createStyles(({ css, token }) => ({
+  footer: css`
+    position: sticky;
+    bottom: 0;
+    border-top: 1px solid ${token.colorBorder};
+  `,
+  form: css`
+    overflow-y: auto;
+  `,
+  header: css`
+    background: ${token.colorBgContainer};
+    border-bottom: 1px solid ${token.colorSplit};
+  `,
+  title: css`
+    font-size: 16px;
+    font-weight: 500;
+  `,
+}));
+
+const EditPage = memo(() => {
+  const { t } = useTranslation('common');
+
+  const { styles } = useStyles();
+
+  return (
+    <ChatLayout>
+      <Flexbox height={'100vh'} style={{ position: 'relative' }} width={'100%'}>
+        {/*header*/}
+        <ChatHeader
+          left={<div className={styles.title}>{t('editAgentProfile')}</div>}
+          onBackClick={() => Router.back()}
+          right={
+            <>
+              <Button>{t('share')}</Button>
+              <Button type={'primary'}>{t('export')}</Button>
+            </>
+          }
+          showBackButton
+        />
+        {/*form*/}
+        <Flexbox className={styles.form} flex={1} gap={10} padding={24}>
+          <AgentMeta />
+          <AgentConfig />
+        </Flexbox>
+      </Flexbox>
+    </ChatLayout>
+  );
+});
+
+export default EditPage;

package/src/pages/chat/[id]/edit/style.ts

@@ -0,0 +1,42 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  collapseHeader: css`
+    .ant-collapse-header {
+      align-items: center !important;
+    }
+  `,
+  footer: css`
+    position: sticky;
+    bottom: 0;
+    border-top: 1px solid ${token.colorBorder};
+  `,
+  form: css`
+    overflow-y: auto;
+  `,
+  header: css`
+    background: ${token.colorBgContainer};
+    border-bottom: 1px solid ${token.colorSplit};
+  `,
+  profile: css`
+    font-size: 20px;
+    font-weight: bold;
+    color: ${token.colorText};
+  `,
+  prompt: css`
+    padding: 12px;
+    background: ${token.colorFillTertiary};
+  `,
+  title: css`
+    font-size: 16px;
+    font-weight: 500;
+
+    .ant-collapse-header {
+      padding: 0 !important;
+    }
+
+    .ant-collapse-content-box {
+      padding: 0 !important;
+    }
+  `,
+}));

package/src/pages/chat/[id]/index.page.tsx

@@ -0,0 +1,40 @@
+import isEqual from 'fast-deep-equal';
+import Head from 'next/head';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { sessionSelectors, useSessionStore } from '@/store/session';
+
+import Layout from '../layout';
+import Config from './Config';
+import Conversation from './Conversation';
+import Header from './Header';
+
+const Chat = memo(() => {
+  const [title] = useSessionStore((s) => {
+    const context = sessionSelectors.currentSession(s);
+    return [context?.meta.title];
+  }, isEqual);
+
+  const pageTitle = title ? `${title} - LobeChat` : 'LobeChat';
+
+  return (
+    <Layout>
+      <Head>
+        <title>{pageTitle}</title>
+      </Head>
+
+      <Flexbox flex={1}>
+        <Header />
+        <Flexbox
+          id={'lobe-conversion-container'}
+          style={{ height: 'calc(100vh - 64px)', position: 'relative' }}
+        >
+          <Conversation />
+          <Config />
+        </Flexbox>
+      </Flexbox>
+    </Layout>
+  );
+});
+export default Chat;

package/src/pages/chat/index.page.tsx

@@ -0,0 +1 @@
+export { default } from './[id]/index.page';

package/src/pages/chat/layout.tsx

@@ -0,0 +1,51 @@
+import { useRouter } from 'next/router';
+import { PropsWithChildren, memo, useEffect } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { createI18nNext } from '@/locales/create';
+import { useSessionStore } from '@/store/session';
+import { useSettings } from '@/store/settings';
+
+import Sidebar from '../Sidebar';
+import { Sessions } from './SessionList';
+
+const initI18n = createI18nNext();
+
+const ChatLayout = memo<PropsWithChildren>(({ children }) => {
+  useEffect(() => {
+    initI18n.finally();
+  }, []);
+
+  const [activeSession] = useSessionStore((s) => {
+    return [s.activeSession];
+  }, shallow);
+
+  const router = useRouter();
+  const { id } = router.query;
+
+  useEffect(() => {
+    const hasRehydrated = useSessionStore.persist.hasHydrated();
+    // 只有当水合完毕后，才能正常去激活会话
+    if (typeof id === 'string' && hasRehydrated) {
+      activeSession(id);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    const hasRehydrated = useSettings.persist.hasHydrated();
+    if (hasRehydrated) {
+      useSettings.setState({ sidebarKey: 'chat' });
+    }
+  }, []);
+
+  return (
+    <Flexbox horizontal width={'100%'}>
+      <Sidebar />
+      <Sessions />
+      {children}
+    </Flexbox>
+  );
+});
+
+export default ChatLayout;

package/src/pages/index.page.tsx

@@ -0,0 +1 @@
+export { default } from './chat/index.page';

package/src/pages/setting/Header.tsx

@@ -0,0 +1,27 @@
+import { ChatHeader } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { useTranslation } from 'react-i18next';
+import Router from 'next/router';
+import { memo } from 'react';
+
+const useStyles = createStyles(({ css, token }) => ({
+  title: css`
+    font-size: 16px;
+    font-weight: bold;
+    color: ${token.colorText};
+  `,
+}));
+const Header = memo(() => {
+  const { t } = useTranslation('setting');
+
+  const { styles } = useStyles();
+  return (
+    <ChatHeader
+      left={<div className={styles.title}>{t('header')}</div>}
+      onBackClick={() => Router.back()}
+      showBackButton
+    />
+  );
+});
+
+export default Header;

package/src/pages/setting/SettingForm.tsx

@@ -0,0 +1,42 @@
+import { Form, Input, type ItemGroup } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { Palette } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { settingsSelectors, useSettings } from '@/store/settings';
+import { ConfigKeys } from '@/types/exportConfig';
+
+type SettingItemGroup = ItemGroup & {
+  children: {
+    name: ConfigKeys;
+  }[];
+};
+
+const SettingForm = memo(() => {
+  const settings = useSettings(settingsSelectors.currentSettings, isEqual);
+
+  const { t } = useTranslation('setting');
+
+  const theme: SettingItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: <Input />,
+          desc: t('settingTheme.avatar.desc'),
+          label: t('settingTheme.avatar.title'),
+          name: 'avatar',
+        },
+      ],
+      icon: Palette,
+      title: t('settingTheme.title'),
+    }),
+    [settings],
+  );
+
+  return (
+    <Form initialValues={settings} items={[theme]} style={{ maxWidth: 1024, width: '100%' }} />
+  );
+});
+
+export default SettingForm;