@lobehub/chat 1.0.0

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;

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);