monorepo packages (#344)

projects/app/src/pages/chat/components/ChatHeader.tsx

@@ -0,0 +1,83 @@
+import React, { useMemo } from 'react';
+import { Flex, useTheme, Box } from '@chakra-ui/react';
+import { useGlobalStore } from '@/store/global';
+import MyIcon from '@/components/Icon';
+import Tag from '@/components/Tag';
+import Avatar from '@/components/Avatar';
+import ToolMenu from './ToolMenu';
+import { ChatItemType } from '@/types/chat';
+import { useRouter } from 'next/router';
+
+const ChatHeader = ({
+  history,
+  appName,
+  appAvatar,
+  chatModels,
+  appId,
+  onOpenSlider
+}: {
+  history: ChatItemType[];
+  appName: string;
+  appAvatar: string;
+  chatModels?: string[];
+  appId?: string;
+  onOpenSlider: () => void;
+}) => {
+  const router = useRouter();
+  const theme = useTheme();
+  const { isPc } = useGlobalStore();
+  const title = useMemo(
+    () => history[history.length - 2]?.value?.slice(0, 8) || appName || '新对话',
+    [appName, history]
+  );
+
+  return (
+    <Flex
+      alignItems={'center'}
+      px={[3, 5]}
+      h={['46px', '60px']}
+      borderBottom={theme.borders.base}
+      borderBottomColor={'gray.200'}
+      color={'myGray.900'}
+    >
+      {isPc ? (
+        <>
+          <Box mr={3} color={'myGray.1000'}>
+            {title}
+          </Box>
+          <Tag>
+            <MyIcon name={'history'} w={'14px'} />
+            <Box ml={1}>{history.length === 0 ? '新的对话' : `${history.length}条记录`}</Box>
+          </Tag>
+          {!!chatModels && chatModels.length > 0 && (
+            <Tag ml={2} colorSchema={'green'}>
+              <MyIcon name={'chatModelTag'} w={'14px'} />
+              <Box ml={1}>{chatModels.join(',')}</Box>
+            </Tag>
+          )}
+          <Box flex={1} />
+        </>
+      ) : (
+        <>
+          <MyIcon name={'menu'} w={'20px'} h={'20px'} color={'myGray.900'} onClick={onOpenSlider} />
+          <Flex px={3} alignItems={'center'} flex={'1 0 0'} w={0} justifyContent={'center'}>
+            <Avatar src={appAvatar} w={'16px'} />
+            <Box
+              ml={1}
+              className="textEllipsis"
+              onClick={() => {
+                appId && router.push(`/app/detail?appId=${appId}`);
+              }}
+            >
+              {appName}
+            </Box>
+          </Flex>
+        </>
+      )}
+      {/* control */}
+      <ToolMenu history={history} />
+    </Flex>
+  );
+};
+
+export default ChatHeader;

projects/app/src/pages/chat/components/ChatHistorySlider.tsx

@@ -0,0 +1,337 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Box,
+  Button,
+  Flex,
+  useTheme,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  IconButton
+} from '@chakra-ui/react';
+import { useGlobalStore } from '@/store/global';
+import { useEditTitle } from '@/hooks/useEditTitle';
+import { useRouter } from 'next/router';
+import Avatar from '@/components/Avatar';
+import MyTooltip from '@/components/MyTooltip';
+import MyIcon from '@/components/Icon';
+import { useTranslation } from 'react-i18next';
+import { useConfirm } from '@/hooks/useConfirm';
+import Tabs from '@/components/Tabs';
+import { useUserStore } from '@/store/user';
+import { useQuery } from '@tanstack/react-query';
+
+type HistoryItemType = {
+  id: string;
+  title: string;
+  customTitle?: string;
+  top?: boolean;
+};
+
+enum TabEnum {
+  'app' = 'app',
+  'history' = 'history'
+}
+
+const ChatHistorySlider = ({
+  appId,
+  appName,
+  appAvatar,
+  history,
+  activeChatId,
+  onChangeChat,
+  onDelHistory,
+  onClearHistory,
+  onSetHistoryTop,
+  onSetCustomTitle,
+  onClose
+}: {
+  appId?: string;
+  appName: string;
+  appAvatar: string;
+  history: HistoryItemType[];
+  activeChatId: string;
+  onChangeChat: (chatId?: string) => void;
+  onDelHistory: (chatId: string) => void;
+  onClearHistory: () => void;
+  onSetHistoryTop?: (e: { chatId: string; top: boolean }) => void;
+  onSetCustomTitle?: (e: { chatId: string; title: string }) => void;
+  onClose: () => void;
+}) => {
+  const theme = useTheme();
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { isPc } = useGlobalStore();
+  const { myApps, loadMyApps, userInfo } = useUserStore();
+
+  const [currentTab, setCurrentTab] = useState<`${TabEnum}`>(TabEnum.history);
+
+  const isShare = useMemo(() => !appId || !userInfo, [appId, userInfo]);
+
+  // custom title edit
+  const { onOpenModal, EditModal: EditTitleModal } = useEditTitle({
+    title: '自定义历史记录标题',
+    placeholder: '如果设置为空，会自动跟随聊天记录。'
+  });
+  const { openConfirm, ConfirmModal } = useConfirm({
+    content: isShare
+      ? t('chat.Confirm to clear share chat histroy')
+      : t('chat.Confirm to clear history')
+  });
+
+  const concatHistory = useMemo<HistoryItemType[]>(
+    () =>
+      !activeChatId ? [{ id: activeChatId, title: t('chat.New Chat') }].concat(history) : history,
+    [activeChatId, history, t]
+  );
+
+  useQuery(['init'], () => {
+    if (isShare) {
+      setCurrentTab(TabEnum.history);
+      return null;
+    }
+    return loadMyApps(false);
+  });
+
+  return (
+    <Flex
+      position={'relative'}
+      flexDirection={'column'}
+      w={'100%'}
+      h={'100%'}
+      bg={'white'}
+      borderRight={['', theme.borders.base]}
+      whiteSpace={'nowrap'}
+    >
+      {isPc && (
+        <MyTooltip label={appId ? t('app.App Detail') : ''} offset={[0, 0]}>
+          <Flex
+            pt={5}
+            pb={2}
+            px={[2, 5]}
+            alignItems={'center'}
+            cursor={appId ? 'pointer' : 'default'}
+            onClick={() =>
+              appId &&
+              router.replace({
+                pathname: '/app/detail',
+                query: { appId }
+              })
+            }
+          >
+            <Avatar src={appAvatar} />
+            <Box flex={'1 0 0'} w={0} ml={2} fontWeight={'bold'} className={'textEllipsis'}>
+              {appName}
+            </Box>
+          </Flex>
+        </MyTooltip>
+      )}
+
+      {/* menu */}
+      <Flex w={'100%'} px={[2, 5]} h={'36px'} my={5} alignItems={'center'}>
+        {!isPc && !isShare && (
+          <Tabs
+            w={'120px'}
+            mr={2}
+            list={[
+              { label: 'App', id: TabEnum.app },
+              { label: 'chat.History', id: TabEnum.history }
+            ]}
+            activeId={currentTab}
+            onChange={(e) => setCurrentTab(e as `${TabEnum}`)}
+          />
+        )}
+        <Button
+          variant={'base'}
+          flex={1}
+          h={'100%'}
+          color={'myBlue.700'}
+          borderRadius={'xl'}
+          leftIcon={<MyIcon name={'chat'} w={'16px'} />}
+          overflow={'hidden'}
+          onClick={() => onChangeChat()}
+        >
+          {t('chat.New Chat')}
+        </Button>
+
+        {(isPc || isShare) && (
+          <IconButton
+            ml={3}
+            h={'100%'}
+            variant={'base'}
+            aria-label={''}
+            borderRadius={'xl'}
+            onClick={openConfirm(onClearHistory)}
+          >
+            <MyIcon name={'clear'} w={'16px'} />
+          </IconButton>
+        )}
+      </Flex>
+
+      <Box flex={'1 0 0'} h={0} px={[2, 5]} overflow={'overlay'}>
+        {/* chat history */}
+        {(currentTab === TabEnum.history || isPc) && (
+          <>
+            {concatHistory.map((item, i) => (
+              <Flex
+                position={'relative'}
+                key={item.id || `${i}`}
+                alignItems={'center'}
+                py={3}
+                px={4}
+                cursor={'pointer'}
+                userSelect={'none'}
+                borderRadius={'lg'}
+                mb={2}
+                _hover={{
+                  bg: 'myGray.100',
+                  '& .more': {
+                    display: 'block'
+                  }
+                }}
+                bg={item.top ? '#E6F6F6 !important' : ''}
+                {...(item.id === activeChatId
+                  ? {
+                      backgroundColor: 'myBlue.100 !important',
+                      color: 'myBlue.700'
+                    }
+                  : {
+                      onClick: () => {
+                        onChangeChat(item.id);
+                      }
+                    })}
+              >
+                <MyIcon name={item.id === activeChatId ? 'chatFill' : 'chat'} w={'16px'} />
+                <Box flex={'1 0 0'} ml={3} className="textEllipsis">
+                  {item.customTitle || item.title}
+                </Box>
+                {!!item.id && (
+                  <Box className="more" display={['block', 'none']}>
+                    <Menu autoSelect={false} isLazy offset={[0, 5]}>
+                      <MenuButton
+                        _hover={{ bg: 'white' }}
+                        cursor={'pointer'}
+                        borderRadius={'md'}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                        }}
+                      >
+                        <MyIcon name={'more'} w={'14px'} p={1} />
+                      </MenuButton>
+                      <MenuList color={'myGray.700'} minW={`90px !important`}>
+                        {onSetHistoryTop && (
+                          <MenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onSetHistoryTop({ chatId: item.id, top: !item.top });
+                            }}
+                          >
+                            <MyIcon mr={2} name={'setTop'} w={'16px'}></MyIcon>
+                            {item.top ? '取消置顶' : '置顶'}
+                          </MenuItem>
+                        )}
+                        {onSetCustomTitle && (
+                          <MenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onOpenModal({
+                                defaultVal: item.customTitle || item.title,
+                                onSuccess: (e) =>
+                                  onSetCustomTitle({
+                                    chatId: item.id,
+                                    title: e
+                                  })
+                              });
+                            }}
+                          >
+                            <MyIcon mr={2} name={'customTitle'} w={'16px'}></MyIcon>
+                            自定义标题
+                          </MenuItem>
+                        )}
+                        <MenuItem
+                          _hover={{ color: 'red.500' }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onDelHistory(item.id);
+                            if (item.id === activeChatId) {
+                              onChangeChat();
+                            }
+                          }}
+                        >
+                          <MyIcon mr={2} name={'delete'} w={'16px'}></MyIcon>
+                          删除
+                        </MenuItem>
+                      </MenuList>
+                    </Menu>
+                  </Box>
+                )}
+              </Flex>
+            ))}
+          </>
+        )}
+        {currentTab === TabEnum.app && !isPc && (
+          <>
+            {myApps.map((item) => (
+              <Flex
+                key={item._id}
+                py={2}
+                px={3}
+                mb={3}
+                borderRadius={'lg'}
+                alignItems={'center'}
+                {...(item._id === appId
+                  ? {
+                      backgroundColor: 'myBlue.100 !important',
+                      color: 'myBlue.700'
+                    }
+                  : {
+                      onClick: () => {
+                        router.replace({
+                          query: {
+                            appId: item._id
+                          }
+                        });
+                        onClose();
+                      }
+                    })}
+              >
+                <Avatar src={item.avatar} w={'24px'} />
+                <Box ml={2} className={'textEllipsis'}>
+                  {item.name}
+                </Box>
+              </Flex>
+            ))}
+          </>
+        )}
+      </Box>
+
+      {!isPc && appId && (
+        <Flex
+          mt={2}
+          borderTop={theme.borders.base}
+          alignItems={'center'}
+          cursor={'pointer'}
+          p={3}
+          onClick={() => router.push('/app/list')}
+        >
+          <IconButton
+            mr={3}
+            icon={<MyIcon name={'backFill'} w={'18px'} color={'myBlue.600'} />}
+            bg={'white'}
+            boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
+            h={'28px'}
+            size={'sm'}
+            borderRadius={'50%'}
+            aria-label={''}
+          />
+          {t('chat.Exit Chat')}
+        </Flex>
+      )}
+      <EditTitleModal />
+      <ConfirmModal />
+    </Flex>
+  );
+};
+
+export default ChatHistorySlider;

projects/app/src/pages/chat/components/Empty.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Card, Box, Flex } from '@chakra-ui/react';
+import { useMarkdown } from '@/hooks/useMarkdown';
+import Markdown from '@/components/Markdown';
+import Avatar from '@/components/Avatar';
+
+const Empty = ({
+  showChatProblem,
+  model: { name, intro, avatar }
+}: {
+  showChatProblem: boolean;
+  model: {
+    name: string;
+    intro: string;
+    avatar: string;
+  };
+}) => {
+  const { data: chatProblem } = useMarkdown({ url: '/chatProblem.md' });
+  const { data: versionIntro } = useMarkdown({ url: '/versionIntro.md' });
+
+  return (
+    <Box
+      minH={'100%'}
+      w={'85%'}
+      maxW={'600px'}
+      m={'auto'}
+      py={'5vh'}
+      alignItems={'center'}
+      justifyContent={'center'}
+    >
+      {name && (
+        <Card p={4} mb={10}>
+          <Flex mb={2} alignItems={'center'} justifyContent={'center'}>
+            <Avatar src={avatar} w={'32px'} h={'32px'} />
+            <Box ml={3} fontSize={'3xl'} fontWeight={'bold'}>
+              {name}
+            </Box>
+          </Flex>
+          <Box whiteSpace={'pre-line'}>{intro}</Box>
+        </Card>
+      )}
+
+      {showChatProblem && (
+        <>
+          {/* version intro */}
+          <Card p={4} mb={10}>
+            <Markdown source={versionIntro} />
+          </Card>
+          <Card p={4}>
+            <Markdown source={chatProblem} />
+          </Card>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default Empty;

projects/app/src/pages/chat/components/SliderApps.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Flex, Box, IconButton } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import { useUserStore } from '@/store/user';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import MyIcon from '@/components/Icon';
+import Avatar from '@/components/Avatar';
+
+const SliderApps = ({ appId }: { appId: string }) => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { myApps, loadMyApps } = useUserStore();
+
+  useQuery(['loadModels'], () => loadMyApps(false));
+
+  return (
+    <Flex flexDirection={'column'} h={'100%'}>
+      <Box px={5} py={4}>
+        <Flex
+          alignItems={'center'}
+          cursor={'pointer'}
+          py={2}
+          px={3}
+          borderRadius={'md'}
+          _hover={{ bg: 'myGray.200' }}
+          onClick={() => router.push('/app/list')}
+        >
+          <IconButton
+            mr={3}
+            icon={<MyIcon name={'backFill'} w={'18px'} color={'myBlue.600'} />}
+            bg={'white'}
+            boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
+            h={'28px'}
+            size={'sm'}
+            borderRadius={'50%'}
+            aria-label={''}
+          />
+          {t('chat.Exit Chat')}
+        </Flex>
+      </Box>
+      <Box flex={'1 0 0'} h={0} px={5} overflow={'overlay'}>
+        {myApps.map((item) => (
+          <Flex
+            key={item._id}
+            py={2}
+            px={3}
+            mb={3}
+            cursor={'pointer'}
+            borderRadius={'lg'}
+            alignItems={'center'}
+            {...(item._id === appId
+              ? {
+                  bg: 'white',
+                  boxShadow: 'md'
+                }
+              : {
+                  _hover: {
+                    bg: 'myGray.200'
+                  },
+                  onClick: () => {
+                    router.replace({
+                      query: {
+                        appId: item._id
+                      }
+                    });
+                  }
+                })}
+          >
+            <Avatar src={item.avatar} w={'24px'} />
+            <Box ml={2} className={'textEllipsis'}>
+              {item.name}
+            </Box>
+          </Flex>
+        ))}
+      </Box>
+    </Flex>
+  );
+};
+
+export default SliderApps;

projects/app/src/pages/chat/components/ToolMenu.tsx

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+import { useChatBox } from '@/components/ChatBox';
+import { ChatItemType } from '@/types/chat';
+import { Menu, MenuButton, MenuList, MenuItem, Box } from '@chakra-ui/react';
+import MyIcon from '@/components/Icon';
+import { useRouter } from 'next/router';
+
+const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
+  const { onExportChat } = useChatBox();
+  const router = useRouter();
+  const { appId, shareId } = router.query;
+
+  const menuList = useMemo(
+    () => [
+      {
+        icon: 'chat',
+        label: '新对话',
+        onClick: () => {
+          router.replace({
+            query: {
+              appId,
+              shareId
+            }
+          });
+        }
+      },
+      {
+        icon: 'apiLight',
+        label: 'HTML导出',
+        onClick: () => onExportChat({ type: 'html', history })
+      },
+      {
+        icon: 'markdown',
+        label: 'Markdown导出',
+        onClick: () => onExportChat({ type: 'md', history })
+      },
+      { icon: 'pdf', label: 'PDF导出', onClick: () => onExportChat({ type: 'pdf', history }) }
+    ],
+    [appId, history, onExportChat, router, shareId]
+  );
+
+  return history.length > 0 ? (
+    <Menu autoSelect={false} isLazy>
+      <MenuButton
+        _hover={{ bg: 'myWhite.600  ' }}
+        cursor={'pointer'}
+        borderRadius={'md'}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <MyIcon name={'more'} w={'14px'} p={2} />
+      </MenuButton>
+      <MenuList color={'myGray.700'} minW={`120px !important`} zIndex={10}>
+        {menuList.map((item) => (
+          <MenuItem key={item.label} onClick={item.onClick} py={[2, 3]}>
+            <MyIcon name={item.icon as any} w={['14px', '16px']} />
+            <Box ml={[1, 2]}>{item.label}</Box>
+          </MenuItem>
+        ))}
+      </MenuList>
+    </Menu>
+  ) : (
+    <Box w={'28px'} h={'28px'} />
+  );
+};
+
+export default ToolMenu;