@lobehub/chat 0.1.6

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

@@ -0,0 +1,79 @@
+import { ActionIcon, DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { LucideEdit, LucideX } from 'lucide-react';
+import Router from 'next/router';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { useSessionStore } from '@/store/session';
+
+import ReadMode from './ReadMode';
+
+const WIDTH = 280;
+
+const useStyles = createStyles(({ css, token }) => ({
+  drawer: css`
+    background: ${token.colorBgLayout};
+  `,
+  header: css`
+    border-bottom: 1px solid ${token.colorBorder};
+  `,
+}));
+
+const Config = () => {
+  const { t } = useTranslation('common');
+  const { styles } = useStyles();
+  const [showAgentSettings, toggleConfig, id] = useSessionStore(
+    (s) => [s.showAgentSettings, s.toggleConfig, s.activeId],
+    shallow,
+  );
+
+  return (
+    <DraggablePanel
+      className={styles.drawer}
+      expand={showAgentSettings}
+      expandable={false}
+      maxWidth={WIDTH}
+      minWidth={WIDTH}
+      mode={'float'}
+      pin
+      placement={'right'}
+      resize={{ left: false }}
+    >
+      <DraggablePanelContainer style={{ flex: 'none', minWidth: WIDTH }}>
+        <Flexbox
+          align={'center'}
+          className={styles.header}
+          distribution={'space-between'}
+          horizontal
+          padding={12}
+          paddingInline={16}
+        >
+          <Flexbox>{t('agentProfile')}</Flexbox>
+          <Flexbox gap={4} horizontal>
+            <ActionIcon
+              icon={LucideEdit}
+              onClick={() => {
+                Router.push(`/chat/${id}/edit`);
+              }}
+              size={{ blockSize: 32, fontSize: 20 }}
+              title={t('edit')}
+            />
+            <ActionIcon
+              icon={LucideX}
+              onClick={() => {
+                toggleConfig(false);
+              }}
+              size={{ blockSize: 32, fontSize: 20 }}
+              title={t('close')}
+            />
+          </Flexbox>
+        </Flexbox>
+        <ReadMode />
+      </DraggablePanelContainer>
+    </DraggablePanel>
+  );
+};
+
+export default Config;

package/src/pages/chat/[id]/Conversation/ChatList.tsx

@@ -0,0 +1,36 @@
+import { ChatList } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { chatSelectors, useSessionStore } from '@/store/session';
+
+const List = () => {
+  const data = useSessionStore(chatSelectors.currentChats, isEqual);
+  const [deleteMessage, resendMessage] = useSessionStore(
+    (s) => [s.deleteMessage, s.resendMessage],
+    shallow,
+  );
+
+  return (
+    <ChatList
+      data={data}
+      onActionClick={(key, id) => {
+        switch (key) {
+          case 'delete': {
+            deleteMessage(id);
+            break;
+          }
+
+          case 'regenerate': {
+            resendMessage(id);
+            break;
+          }
+        }
+      }}
+      style={{ marginTop: 24 }}
+    />
+  );
+};
+
+export default memo(List);

package/src/pages/chat/[id]/Conversation/Input.tsx

@@ -0,0 +1,61 @@
+import { ActionIcon, ChatInputArea, DraggablePanel, Icon, TokenTag } from '@lobehub/ui';
+import { Button } from 'antd';
+import { encode } from 'gpt-tokenizer';
+import { Archive, Eraser, Languages } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { ModelTokens } from '@/const/modelTokens';
+import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
+import { useSettings } from '@/store/settings';
+
+const ChatInput = () => {
+  const [expand, setExpand] = useState<boolean>(false);
+  const [text, setText] = useState('');
+  const textTokenCount = useMemo(() => encode(text).length, [text]);
+
+  const [inputHeight] = useSettings((s) => [s.inputHeight], shallow);
+  const [totalToken, model, sendMessage, clearMessage] = useSessionStore(
+    (s) => [
+      chatSelectors.totalTokenCount(s),
+      agentSelectors.currentAgentModel(s),
+      s.createOrSendMsg,
+      s.clearMessage,
+    ],
+    shallow,
+  );
+
+  return (
+    <DraggablePanel
+      expandable={false}
+      fullscreen={expand}
+      minHeight={200}
+      onSizeChange={(_, size) => {
+        if (!size) return;
+        useSettings.setState({
+          inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
+        });
+      }}
+      placement="bottom"
+      size={{ height: inputHeight, width: '100%' }}
+    >
+      <ChatInputArea
+        actions={
+          <>
+            <ActionIcon icon={Languages} />
+            <ActionIcon icon={Eraser} onClick={clearMessage} />
+            <TokenTag maxValue={ModelTokens[model]} value={totalToken + textTokenCount} />
+          </>
+        }
+        expand={expand}
+        footer={<Button icon={<Icon icon={Archive} />} />}
+        minHeight={200}
+        onExpandChange={setExpand}
+        onInputChange={setText}
+        onSend={sendMessage}
+      />
+    </DraggablePanel>
+  );
+};
+
+export default memo(ChatInput);

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

@@ -0,0 +1,32 @@
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import ChatInput from '@/pages/chat/[id]/Conversation/Input';
+
+import ChatList from './ChatList';
+
+const useStyles = createStyles(({ css, token }) => ({
+  input: css`
+    position: sticky;
+    z-index: 10;
+    bottom: 0;
+    background: ${token.colorBgLayout};
+  `,
+}));
+
+const Conversation = () => {
+  const { styles } = useStyles();
+  return (
+    <>
+      <div style={{ flex: 1, overflowY: 'scroll' }}>
+        <ChatList />
+      </div>
+      <Flexbox className={styles.input}>
+        <ChatInput />
+      </Flexbox>
+    </>
+  );
+};
+
+export default memo(Conversation);

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;