@lobehub/chat 0.74.0 → 0.75.0

package/src/pages/chat/features/Conversation/Input/Footer/SaveTopic.tsx

@@ -0,0 +1,27 @@
+import { ActionIcon, Icon, Tooltip } from '@lobehub/ui';
+import { Button } from 'antd';
+import { useResponsive } from 'antd-style';
+import { LucideGalleryVerticalEnd } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const SaveTopic = memo(() => {
+  const { t } = useTranslation('common');
+  const [hasTopic, saveToTopic] = useSessionStore((s) => [!!s.activeTopicId, s.saveToTopic]);
+  const { mobile } = useResponsive();
+
+  if (hasTopic) return undefined;
+
+  const Render = mobile ? ActionIcon : Button;
+  const icon: any = mobile ? LucideGalleryVerticalEnd : <Icon icon={LucideGalleryVerticalEnd} />;
+
+  return (
+    <Tooltip title={t('topic.saveCurrentMessages')}>
+      <Render icon={icon} onClick={saveToTopic} />
+    </Tooltip>
+  );
+});
+
+export default SaveTopic;

package/src/pages/chat/features/Conversation/Input/Footer/index.tsx

@@ -0,0 +1,35 @@
+import { Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { ArrowBigUp, CornerDownLeft } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import SaveTopic from './SaveTopic';
+
+const Footer = memo(() => {
+  const theme = useTheme();
+  const { t } = useTranslation('common');
+
+  return (
+    <>
+      <Flexbox
+        gap={4}
+        horizontal
+        style={{ color: theme.colorTextDescription, fontSize: 12, marginRight: 12 }}
+      >
+        <Icon icon={CornerDownLeft} />
+        <span>{t('send')}</span>
+        <span>/</span>
+        <Flexbox horizontal>
+          <Icon icon={ArrowBigUp} />
+          <Icon icon={CornerDownLeft} />
+        </Flexbox>
+        <span>{t('warp')}</span>
+      </Flexbox>
+      <SaveTopic />
+    </>
+  );
+});
+
+export default Footer;

package/src/pages/chat/features/Conversation/Input/Mobile.tsx

@@ -0,0 +1,12 @@
+import { ReactNode, memo } from 'react';
+
+interface ChatInputMobileLayoutProps {
+  children: ReactNode;
+  expand?: boolean;
+}
+
+const ChatInputMobileLayout = memo<ChatInputMobileLayoutProps>(({ children }) => {
+  return <div>{children}</div>;
+});
+
+export default ChatInputMobileLayout;

package/src/pages/chat/features/Conversation/Input/index.tsx

@@ -1,64 +1,46 @@
-import { ChatInputArea, DraggablePanel } from '@lobehub/ui';
+import { ChatInputArea } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
-import { useGlobalStore } from '@/store/global';
+import { CHAT_TEXTAREA_HEIGHT } from '@/const/layoutTokens';
 import { useSessionStore } from '@/store/session';
 
-import InputActions from './Action';
-import ActionsRight from './ActionRight';
+import ActionLeft from './ActionBar/ActionLeft';
+import ActionsRight from './ActionBar/ActionRight';
+import Token from './ActionBar/Token';
+import Desktop from './Desktop';
 import Footer from './Footer';
-import Token from './Token';
+import Mobile from './Mobile';
 
 const ChatInput = () => {
   const { t } = useTranslation('common');
   const [expand, setExpand] = useState<boolean>(false);
   const [message, setMessage] = useState('');
+  const { mobile } = useResponsive();
 
-  const [inputHeight, updatePreference] = useGlobalStore((s) => [
-    s.preference.inputHeight,
-    s.updatePreference,
+  const [isLoading, sendMessage, stopGenerateMessage] = useSessionStore((s) => [
+    !!s.chatLoadingId,
+    s.sendMessage,
+    s.stopGenerateMessage,
   ]);
-  const [isLoading, hasTopic, sendMessage, saveToTopic, stopGenerateMessage] = useSessionStore(
-    (s) => [
-      !!s.chatLoadingId,
-      !!s.activeTopicId,
-      s.sendMessage,
-      s.saveToTopic,
-      s.stopGenerateMessage,
-    ],
-  );
 
-  return (
-    <DraggablePanel
-      expandable={false}
-      fullscreen={expand}
-      headerHeight={HEADER_HEIGHT}
-      minHeight={CHAT_TEXTAREA_HEIGHT}
-      onSizeChange={(_, size) => {
-        if (!size) return;
+  const Render = mobile ? Mobile : Desktop;
 
-        updatePreference({
-          inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
-        });
-      }}
-      placement="bottom"
-      size={{ height: inputHeight, width: '100%' }}
-      style={{ zIndex: 10 }}
-    >
+  return (
+    <Render expand={expand}>
       <ChatInputArea
         actions={
           <>
-            <InputActions />
+            <ActionLeft />
             <Token input={message} />
           </>
         }
         actionsRight={<ActionsRight />}
         expand={expand}
-        footer={<Footer hasTopic={hasTopic} saveToTopic={saveToTopic} />}
+        footer={<Footer />}
         loading={isLoading}
-        minHeight={CHAT_TEXTAREA_HEIGHT}
+        minHeight={mobile ? 0 : CHAT_TEXTAREA_HEIGHT}
         onExpandChange={setExpand}
         onInputChange={setMessage}
         onSend={sendMessage}
@@ -70,7 +52,7 @@ const ChatInput = () => {
         }}
         value={message}
       />
-    </DraggablePanel>
+    </Render>
   );
 };
 

package/src/pages/chat/features/SessionList/Header/Desktop.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Logo, SearchBar } from '@lobehub/ui';
+import { ActionIcon, Logo } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { MessageSquarePlus } from 'lucide-react';
 import Link from 'next/link';
@@ -8,6 +8,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
 
+import SessionSearchBar from '../../SessionSearchBar';
+
 export const useStyles = createStyles(({ css, token }) => ({
   logo: css`
     fill: ${token.colorText};
@@ -21,7 +23,7 @@ export const useStyles = createStyles(({ css, token }) => ({
 const Header = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('common');
-  const [keywords, createSession] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
+  const [createSession] = useSessionStore((s) => [s.createSession]);
 
   return (
     <Flexbox className={styles.top} gap={16} padding={16}>
@@ -31,22 +33,13 @@ const Header = memo(() => {
         </Link>
         <ActionIcon
           icon={MessageSquarePlus}
-          onClick={createSession}
+          onClick={() => createSession()}
           size={{ fontSize: 24 }}
           style={{ flex: 'none' }}
           title={t('newAgent')}
         />
       </Flexbox>
-      <SearchBar
-        allowClear
-        enableShortKey
-        onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
-        placeholder={t('searchAgentPlaceholder')}
-        shortKey={'k'}
-        spotlight
-        type={'ghost'}
-        value={keywords}
-      />
+      <SessionSearchBar />
     </Flexbox>
   );
 });

package/src/pages/chat/features/SessionList/Header/Mobile.tsx

@@ -26,7 +26,7 @@ const Header = memo(() => {
       left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
       right={
         <>
-          <ActionIcon icon={MessageSquarePlus} onClick={createSession} />
+          <ActionIcon icon={MessageSquarePlus} onClick={() => createSession()} />
           <ActionIcon
             icon={Settings2}
             onClick={() => {

package/src/pages/chat/features/SessionList/List/AddButton.tsx

@@ -12,7 +12,7 @@ const AddButton = memo<ButtonProps>((props) => {
   const createSession = useSessionStore((s) => s.createSession);
   return (
     <Flexbox style={{ margin: '12px 16px' }}>
-      <Button block icon={<Icon icon={Plus} />} onClick={createSession} {...props}>
+      <Button block icon={<Icon icon={Plus} />} onClick={() => createSession()} {...props}>
         {t('newAgent')}
       </Button>
     </Flexbox>

package/src/pages/chat/features/SessionList/List/Item/index.tsx

@@ -1,7 +1,7 @@
 import { SiOpenai } from '@icons-pack/react-simple-icons';
 import { Avatar, List, Tag } from '@lobehub/ui';
 import { useHover } from 'ahooks';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import { memo, useMemo, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
@@ -34,7 +34,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
   const isHovering = useHover(ref);
-
+  const { mobile } = useResponsive();
   const { styles } = useStyles();
   const [defaultModel] = useGlobalStore((s) => [globalSelectors.defaultAgentConfig(s).model]);
 
@@ -98,7 +98,8 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   return (
     <Item
       actions={actions}
-      active={active}
+      // needn't active state in mobile
+      active={mobile ? false : active}
       addon={addon}
       avatar={avatarRender}
       className={styles.container}

package/src/pages/chat/features/SessionList/List/index.tsx

@@ -26,10 +26,8 @@ const SessionList = memo(() => {
       <Link
         href={SESSION_CHAT_URL(id, mobile)}
         key={id}
-        // replace onClick with onPointerDown to prevent double click on mobile
-        onPointerDown={(e) => {
+        onClick={(e) => {
           e.preventDefault();
-
           if (mobile) switchSession(id);
           else activeSession(id);
         }}

package/src/pages/chat/features/SessionList/Mobile.tsx

@@ -1,22 +1,12 @@
-import { SearchBar } from '@lobehub/ui';
 import { ReactNode, memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { useSessionStore } from '@/store/session';
+import SessionSearchBar from '../SessionSearchBar';
 
 const Sessions = memo<{ children: ReactNode }>(({ children }) => {
-  const { t } = useTranslation('common');
-  const [keywords] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
   return (
     <>
       <div style={{ padding: '8px 16px' }}>
-        <SearchBar
-          allowClear
-          onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
-          placeholder={t('searchAgentPlaceholder')}
-          type={'block'}
-          value={keywords}
-        />
+        <SessionSearchBar />
       </div>
       {children}
     </>

package/src/pages/chat/features/SessionSearchBar/index.tsx

@@ -0,0 +1,26 @@
+import { SearchBar } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const SessionSearchBar = memo(() => {
+  const { t } = useTranslation('common');
+  const [keywords] = useSessionStore((s) => [s.searchKeywords]);
+  const { mobile } = useResponsive();
+  return (
+    <SearchBar
+      allowClear
+      enableShortKey={!mobile}
+      onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
+      placeholder={t('searchAgentPlaceholder')}
+      shortKey={'k'}
+      spotlight={!mobile}
+      type={mobile ? 'block' : 'ghost'}
+      value={keywords}
+    />
+  );
+});
+
+export default SessionSearchBar;

package/src/pages/chat/features/Sidebar/Topic/index.tsx

@@ -1,9 +1,10 @@
+import { EmptyCard } from '@lobehub/ui';
 import { useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import Empty from '@/components/Empty';
 import { useGlobalStore } from '@/store/global';
 import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { topicSelectors } from '@/store/session/selectors';
@@ -15,20 +16,27 @@ export const Topic = () => {
   const init = useSessionChatInit();
   const topics = useSessionStore(topicSelectors.currentTopics, isEqual);
   const { isDarkMode } = useThemeMode();
-  const [activeTopicId] = useSessionStore((s) => [s.activeTopicId]);
+  const [activeTopicId, keywords] = useSessionStore((s) => [
+    s.activeTopicId,
+    s.topicSearchKeywords,
+  ]);
   const { t } = useTranslation('empty');
-
   const [visible, updateGuideState] = useGlobalStore((s) => [
     s.preference.guide?.topic,
     s.updateGuideState,
   ]);
 
+  const topicsData = useMemo(() => {
+    if (!keywords) return topics;
+    return topics.filter(({ title }) => title.toLowerCase().includes(keywords.toLowerCase()));
+  }, [topics, keywords]);
+
   return !init ? (
     <SkeletonList />
   ) : (
     <Flexbox gap={2} style={{ marginBottom: 12 }}>
       {topics?.length === 0 && (
-        <Empty
+        <EmptyCard
           alt={t('topic.desc')}
           cover={`/images/empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`}
           desc={t('topic.desc')}
@@ -43,9 +51,13 @@ export const Topic = () => {
         />
       )}
 
-      <TopicItem active={!activeTopicId} fav={false} title={'默认话题'} />
+      <TopicItem
+        active={!activeTopicId}
+        fav={false}
+        title={t('topic.defaultTitle', { ns: 'common' })}
+      />
 
-      {topics.map(({ id, favorite, title }) => (
+      {topicsData.map(({ id, favorite, title }) => (
         <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
       ))}
     </Flexbox>

package/src/pages/chat/features/Sidebar/TopicSearchBar/index.tsx

@@ -0,0 +1,24 @@
+import { SearchBar } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const TopicSearchBar = memo(() => {
+  const { t } = useTranslation('common');
+  const [keywords] = useSessionStore((s) => [s.topicSearchKeywords]);
+  const { mobile } = useResponsive();
+  return (
+    <SearchBar
+      allowClear
+      onChange={(e) => useSessionStore.setState({ topicSearchKeywords: e.target.value })}
+      placeholder={t('topic.searchPlaceholder')}
+      spotlight={!mobile}
+      type={mobile ? 'block' : 'ghost'}
+      value={keywords}
+    />
+  );
+});
+
+export default TopicSearchBar;

package/src/pages/chat/features/Sidebar/index.tsx

@@ -1,29 +1,22 @@
-import { SearchBar } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import Desktop from './Desktop';
 import Mobile from './Mobile';
 import { Topic } from './Topic';
+import TopicSearchBar from './TopicSearchBar';
 
 const SideBar = memo(() => {
   const { mobile } = useResponsive();
 
   const Render = mobile ? Mobile : Desktop;
 
-  const { t } = useTranslation('common');
-
   return (
     <Render>
       <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
         <Flexbox padding={16}>
-          <SearchBar
-            placeholder={t('topic.searchPlaceholder')}
-            spotlight={!mobile}
-            type={mobile ? 'block' : 'ghost'}
-          />
+          <TopicSearchBar />
         </Flexbox>
         <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
           <Topic />

package/src/pages/market/features/AgentCard/AgentCardBanner.tsx

@@ -0,0 +1,64 @@
+import { Avatar, DivProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { MetaData } from '@/types/meta';
+
+export const useStyles = createStyles(({ css, token }, maskColor: string) => ({
+  banner: css`
+    position: relative;
+
+    overflow: hidden;
+
+    height: 64px;
+    margin-bottom: -56px;
+
+    background: ${token.colorFill};
+  `,
+  bannerImg: css`
+    filter: blur(6px) saturate(1.6);
+  `,
+  bannerMask: css`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: linear-gradient(to bottom, transparent, ${maskColor || token.colorBgLayout});
+  `,
+}));
+
+interface AgentCardBannerProps extends DivProps {
+  mask?: boolean;
+  maskColor?: string;
+  meta: MetaData;
+  size?: number;
+}
+
+const AgentCardBanner = memo<AgentCardBannerProps>(
+  ({ meta, className, mask, size = 8, maskColor, ...props }) => {
+    const { styles, theme, cx } = useStyles(maskColor);
+
+    return (
+      <Flexbox
+        align={'center'}
+        className={cx(styles.banner, className)}
+        justify={'center'}
+        {...props}
+      >
+        <Avatar
+          avatar={meta.avatar}
+          background={meta.backgroundColor || theme.colorBgContainer}
+          className={styles.bannerImg}
+          style={{ transform: `scale(${size})` }}
+        />
+        {mask && <div className={styles.bannerMask} />}
+      </Flexbox>
+    );
+  },
+);
+
+export default AgentCardBanner;

package/src/pages/market/features/AgentCard/AgentCardItem.tsx

@@ -0,0 +1,57 @@
+import { Avatar, Tag } from '@lobehub/ui';
+import { useHover } from 'ahooks';
+import { Typography } from 'antd';
+import { useThemeMode } from 'antd-style';
+import { startCase } from 'lodash-es';
+import { memo, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useMarketStore } from '@/store/market';
+import { AgentsMarketIndexItem } from '@/types/market';
+
+import AgentCardBanner from './AgentCardBanner';
+import { useStyles } from './style';
+
+const { Paragraph } = Typography;
+const AgentCardItem = memo<AgentsMarketIndexItem>(({ meta, identifier }) => {
+  const ref = useRef(null);
+  const isHovering = useHover(ref);
+  const onAgentCardClick = useMarketStore((s) => s.activateAgent);
+  const { avatar, title, description, tags, backgroundColor } = meta;
+  const { styles, theme } = useStyles();
+  const { isDarkMode } = useThemeMode();
+  return (
+    <Flexbox className={styles.container} onClick={() => onAgentCardClick(identifier)}>
+      <AgentCardBanner
+        mask
+        maskColor={theme.colorBgContainer}
+        meta={meta}
+        style={{ opacity: isDarkMode ? 0.9 : 0.4 }}
+      />
+      <Flexbox className={styles.inner} gap={8} ref={ref}>
+        <Avatar
+          animation={isHovering}
+          avatar={avatar}
+          background={backgroundColor || theme.colorFillTertiary}
+          className={styles.avatar}
+          size={56}
+        />
+        <Paragraph className={styles.title} ellipsis={{ rows: 1, tooltip: title }}>
+          {title}
+        </Paragraph>
+        <Paragraph className={styles.desc} ellipsis={{ rows: 2, tooltip: description }}>
+          {description}
+        </Paragraph>
+        <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
+          {(tags as string[]).map((tag: string, index) => (
+            <Tag key={index} style={{ margin: 0 }}>
+              {startCase(tag).trim()}
+            </Tag>
+          ))}
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default AgentCardItem;

package/src/pages/market/features/AgentCard/Loading.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const Loading = memo(() => {
+  return (
+    <Flexbox>
+      <Skeleton paragraph={{ rows: 8 }} />
+    </Flexbox>
+  );
+});
+
+export default Loading;

package/src/pages/market/features/AgentCard/index.tsx

@@ -0,0 +1,37 @@
+import { SpotlightCard } from '@lobehub/ui';
+import { memo, useMemo } from 'react';
+
+import { agentMarketSelectors, useMarketStore } from '@/store/market';
+
+import TagList from '../TagList';
+import AgentCardItem from './AgentCardItem';
+import Loading from './Loading';
+
+const gridRender = (item: any) => <AgentCardItem {...item} />;
+
+const AgentCard = memo(() => {
+  const agentList = useMarketStore(agentMarketSelectors.getAgentList);
+
+  const [useFetchAgentList, keywords] = useMarketStore((s) => [
+    s.useFetchAgentList,
+    s.searchKeywords,
+  ]);
+
+  const { isLoading } = useFetchAgentList();
+
+  const agentListData = useMemo(() => {
+    if (!keywords) return agentList;
+    return agentList.filter(({ meta }) => JSON.stringify(meta).toLowerCase().includes(keywords));
+  }, [agentList, keywords]);
+
+  if (isLoading || !agentList) return <Loading />;
+
+  return (
+    <>
+      <TagList />
+      <SpotlightCard items={agentListData} renderItem={gridRender} />
+    </>
+  );
+});
+
+export default AgentCard;

package/src/pages/market/features/AgentCard/style.ts

@@ -0,0 +1,22 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  avatar: css``,
+
+  container: css`
+    position: relative;
+    overflow: hidden;
+    border-radius: 11px;
+  `,
+  desc: css`
+    color: ${token.colorTextDescription};
+  `,
+  inner: css`
+    padding: 16px;
+  `,
+  title: css`
+    margin-bottom: 0 !important;
+    font-size: 16px;
+    font-weight: 600;
+  `,
+}));

package/src/pages/market/features/AgentSearchBar/index.tsx

@@ -0,0 +1,26 @@
+import { SearchBar } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useMarketStore } from '@/store/market';
+
+const AgentSearchBar = memo(() => {
+  const { t } = useTranslation('market');
+  const keywords = useMarketStore((s) => s.searchKeywords);
+  const { mobile } = useResponsive();
+  return (
+    <SearchBar
+      allowClear
+      enableShortKey={!mobile}
+      onChange={(e) => useMarketStore.setState({ searchKeywords: e.target.value })}
+      placeholder={t('search.placeholder')}
+      shortKey={'k'}
+      spotlight={!mobile}
+      type={mobile ? 'block' : 'ghost'}
+      value={keywords}
+    />
+  );
+});
+
+export default AgentSearchBar;