@lobehub/chat 1.33.5 → 1.34.1

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/Thread.tsx

@@ -0,0 +1,62 @@
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { CSSProperties, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { threadSelectors } from '@/store/chat/selectors';
+
+import ThreadItem from './ThreadItem';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  container: css`
+    cursor: pointer;
+
+    padding-block: 8px 4px;
+    padding-inline: 4px;
+
+    background: ${isDarkMode ? token.colorFillTertiary : token.colorFillQuaternary};
+    border-radius: 6px;
+  `,
+}));
+
+interface ThreadProps {
+  id: string;
+  placement: 'start' | 'end';
+  style?: CSSProperties;
+}
+
+const Thread = memo<ThreadProps>(({ id, placement, style }) => {
+  const { t } = useTranslation('chat');
+  const { styles } = useStyles();
+
+  const threads = useChatStore(threadSelectors.getThreadsBySourceMsgId(id), isEqual);
+
+  return (
+    <Flexbox
+      direction={placement === 'end' ? 'horizontal-reverse' : 'horizontal'}
+      gap={12}
+      paddingInline={16}
+      style={{ paddingBottom: 16, ...style }}
+    >
+      <div style={{ width: 40 }} />
+      <Flexbox className={styles.container} gap={4} padding={4} style={{ width: 'fit-content' }}>
+        <Flexbox gap={8} horizontal paddingInline={6}>
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {t('thread.title')}
+            {threads.length}
+          </Typography.Text>
+        </Flexbox>
+        <Flexbox>
+          {threads.map((thread) => (
+            <ThreadItem key={thread.id} {...thread} />
+          ))}
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Thread;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/ThreadItem.tsx

@@ -0,0 +1,68 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import { ChevronRight } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { ThreadItem } from '@/types/topic';
+
+const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    background: ${token.colorFillTertiary};
+  `,
+  container: css`
+    cursor: pointer;
+
+    padding-block: 4px;
+    padding-inline: 6px;
+
+    font-size: 12px;
+
+    border-radius: 6px;
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  extra: css`
+    color: ${token.colorTextSecondary};
+  `,
+}));
+
+const Item = memo<ThreadItem>(({ id, title, lastActiveAt, sourceMessageId }) => {
+  const { t } = useTranslation('chat');
+  const openThreadInPortal = useChatStore((s) => s.openThreadInPortal);
+  const { styles, cx } = useStyles();
+  const [isActive, messageCount] = useChatStore((s) => [
+    s.activeThreadId === id,
+    chatSelectors.countMessagesByThreadId(id)(s),
+  ]);
+  const mobile = useIsMobile();
+  return (
+    <Flexbox
+      align={'baseline'}
+      className={cx(styles.container, isActive && styles.active)}
+      gap={8}
+      horizontal
+      onClick={() => {
+        if (isActive) return;
+
+        openThreadInPortal(id, sourceMessageId);
+      }}
+    >
+      {title}
+      <Flexbox className={styles.extra} horizontal>
+        {!!messageCount && t('thread.threadMessageCount', { messageCount })}
+        {!mobile && ` · ${dayjs(lastActiveAt).format('YYYY-MM-DD')}`}
+        <Icon icon={ChevronRight} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Item;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/index.tsx

@@ -1,3 +1,4 @@
+import { createStyles } from 'antd-style';
 import React, { memo, useMemo } from 'react';
 
 import { ChatItem } from '@/features/Conversation';
@@ -5,7 +6,42 @@ import ActionsBar from '@/features/Conversation/components/ChatItem/ActionsBar';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { chatSelectors, threadSelectors } from '@/store/chat/selectors';
+
+import Thread from './Thread';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => {
+  const borderColor = isDarkMode ? token.colorFillSecondary : token.colorFillTertiary;
+
+  return {
+    end: css`
+      &::after {
+        inset-inline-end: 36px;
+        border-inline-end: 2px solid ${borderColor};
+        border-end-end-radius: 8px;
+      }
+    `,
+    line: css`
+      &::after {
+        content: '';
+
+        position: absolute;
+        inset-block: 56px 50px;
+
+        width: 32px;
+
+        border-block-end: 2px solid ${borderColor};
+      }
+    `,
+    start: css`
+      &::after {
+        inset-inline-start: 36px;
+        border-inline-start: 2px solid ${borderColor};
+        border-end-start-radius: 8px;
+      }
+    `,
+  };
+});
 
 export interface ThreadChatItemProps {
   id: string;
@@ -13,7 +49,21 @@ export interface ThreadChatItemProps {
 }
 
 const MainChatItem = memo<ThreadChatItemProps>(({ id, index }) => {
-  const [historyLength] = useChatStore((s) => [chatSelectors.mainDisplayChatIDs(s).length]);
+  const { styles, cx } = useStyles();
+
+  const [displayMode] = useAgentStore((s) => {
+    const config = agentSelectors.currentAgentChatConfig(s);
+    return [config.displayMode || 'chat'];
+  });
+
+  const userRole = useChatStore((s) => chatSelectors.getMessageById(id)(s)?.role);
+
+  const placement = displayMode === 'chat' && userRole === 'user' ? 'end' : 'start';
+
+  const [showThread, historyLength] = useChatStore((s) => [
+    threadSelectors.hasThreadBySourceMsgId(id)(s),
+    chatSelectors.mainDisplayChatIDs(s).length,
+  ]);
 
   const enableHistoryDivider = useAgentStore((s) => {
     const config = agentSelectors.currentAgentChatConfig(s);
@@ -29,7 +79,17 @@ const MainChatItem = memo<ThreadChatItemProps>(({ id, index }) => {
   return (
     <ChatItem
       actionBar={actionBar}
+      className={showThread ? cx(styles.line, styles[placement]) : ''}
       enableHistoryDivider={enableHistoryDivider}
+      endRender={
+        showThread && (
+          <Thread
+            id={id}
+            placement={placement}
+            style={{ marginTop: displayMode === 'docs' ? 12 : undefined }}
+          />
+        )
+      }
       id={id}
       index={index}
     />

package/src/app/(main)/chat/(workspace)/@conversation/features/ThreadHydration.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useQueryState } from 'nuqs';
+import { memo, useEffect, useLayoutEffect } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useChatStore } from '@/store/chat';
+
+// sync outside state to useChatStore
+const ThreadHydration = memo(() => {
+  const useStoreUpdater = createStoreUpdater(useChatStore);
+
+  // two-way bindings the topic params to chat store
+  const [portalThread, setThread] = useQueryState('portalThread');
+  useStoreUpdater('portalThreadId', portalThread);
+
+  useLayoutEffect(() => {
+    const unsubscribe = useChatStore.subscribe(
+      (s) => s.portalThreadId,
+      (state) => {
+        setThread(!state ? null : state);
+      },
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  // should open portal automatically when portalThread is set
+  useEffect(() => {
+    if (!!portalThread && !useChatStore.getState().showPortal) {
+      useChatStore.getState().togglePortal(true);
+    }
+  }, [portalThread]);
+
+  const [activeTopicId, useFetchThreads] = useChatStore((s) => [
+    s.activeTopicId,
+    s.useFetchThreads,
+  ]);
+
+  useFetchThreads(activeTopicId);
+
+  return null;
+});
+
+export default ThreadHydration;

package/src/app/(main)/chat/(workspace)/@portal/_layout/Desktop.tsx

@@ -1,12 +1,13 @@
 import { PropsWithChildren } from 'react';
 
+import { PortalHeader } from '@/features/Portal/router';
+
 import Body from '../features/Body';
-import Header from '../features/Header';
 
 const Layout = ({ children }: PropsWithChildren) => {
   return (
     <>
-      <Header />
+      <PortalHeader />
       <Body>{children}</Body>
     </>
   );

package/src/app/(main)/chat/(workspace)/@portal/_layout/Mobile.tsx

@@ -1,17 +1,58 @@
+'use client';
+
+import { Modal } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
 import { PropsWithChildren } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { PortalHeader } from '@/features/Portal/router';
+import { useChatStore } from '@/store/chat';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    background: linear-gradient(${token.colorBgElevated}, ${token.colorBgLayout}) !important;
+  `,
+}));
+
 const Layout = ({ children }: PropsWithChildren) => {
+  const { styles, cx } = useStyles();
+  const [showMobilePortal, isPortalThread, togglePortal] = useChatStore((s) => [
+    s.showPortal,
+    !!s.portalThreadId,
+    s.togglePortal,
+  ]);
+  const { t } = useTranslation('portal');
+
   return (
-    <Flexbox gap={8} height={'100%'} padding={'8px 8px 0'} style={{ overflow: 'hidden' }}>
+    <Modal
+      allowFullscreen
+      className={cx(isPortalThread && styles.container)}
+      height={'95%'}
+      onCancel={() => togglePortal(false)}
+      open={showMobilePortal}
+      styles={{
+        body: { padding: 0 },
+        header: { display: 'none' },
+      }}
+      title={t('title')}
+    >
+      <PortalHeader />
       <Flexbox
-        height={'100%'}
-        style={{ marginInline: -8, overflow: 'hidden', position: 'relative' }}
-        width={'calc(100% + 16px)'}
+        gap={8}
+        height={'calc(100% - 52px)'}
+        padding={'0 8px'}
+        style={{ overflow: 'hidden' }}
       >
-        {children}
+        <Flexbox
+          height={'100%'}
+          style={{ marginInline: -8, overflow: 'hidden', position: 'relative' }}
+          width={'calc(100% + 16px)'}
+        >
+          {children}
+        </Flexbox>
       </Flexbox>
-    </Flexbox>
+    </Modal>
   );
 };
 

package/src/app/(main)/chat/(workspace)/@topic/features/SkeletonList.tsx

@@ -12,7 +12,8 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
     justify-content: center;
 
     height: 44px;
-    padding: 8px;
+    padding-block: 8px;
+    padding-inline: 12px;
 
     .${prefixCls}-skeleton-content {
       display: flex;
@@ -48,7 +49,7 @@ export const Placeholder = memo(() => {
 
 export const SkeletonList = memo(() => (
   <Flexbox style={{ paddingTop: 6 }}>
-    {Array.from({ length: 8 }).map((_, i) => (
+    {Array.from({ length: 6 }).map((_, i) => (
       <Placeholder key={i} />
     ))}
   </Flexbox>

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/ByTimeMode/index.tsx

@@ -15,7 +15,7 @@ import TopicGroupItem from './GroupItem';
 const ByTimeMode = memo(() => {
   const { t } = useTranslation('topic');
   const virtuosoRef = useRef<VirtuosoHandle>(null);
-  const [activeTopicId] = useChatStore((s) => [s.activeTopicId]);
+  const [activeTopicId, activeThreadId] = useChatStore((s) => [s.activeTopicId, s.activeThreadId]);
   const groupTopics = useChatStore(topicSelectors.groupedTopicsSelector, isEqual);
 
   const { groups, groupCounts, topics } = useMemo(() => {
@@ -39,10 +39,17 @@ const ByTimeMode = memo(() => {
       return index === 0 ? (
         <TopicItem active={!activeTopicId} fav={favorite} title={title} />
       ) : (
-        <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
+        <TopicItem
+          active={activeTopicId === id}
+          fav={favorite}
+          id={id}
+          key={id}
+          threadId={activeThreadId}
+          title={title}
+        />
       );
     },
-    [activeTopicId, topics],
+    [activeTopicId, topics, activeThreadId],
   );
 
   const groupContent = useCallback(

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/FlatMode/index.tsx

@@ -42,7 +42,7 @@ const FlatMode = memo(() => {
       // components={{ ScrollSeekPlaceholder: Placeholder }}
       computeItemKey={(_, item) => item.id}
       data={topics}
-      fixedItemHeight={44}
+      defaultItemHeight={44}
       initialTopMostItemIndex={Math.max(activeIndex, 0)}
       itemContent={itemContent}
       overscan={44 * 10}

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/ThreadItem/Content.tsx

@@ -0,0 +1,164 @@
+import { ActionIcon, EditableText, Icon } from '@lobehub/ui';
+import { App, Dropdown, type MenuProps, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { MoreVertical, PencilLine, Trash } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import BubblesLoading from '@/components/BubblesLoading';
+import { LOADING_FLAT } from '@/const/message';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useChatStore } from '@/store/chat';
+
+const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    color: ${token.colorText};
+  `,
+  content: css`
+    position: relative;
+    overflow: hidden;
+    flex: 1;
+  `,
+  title: css`
+    flex: 1;
+
+    height: 28px;
+
+    line-height: 28px;
+    color: ${token.colorTextSecondary};
+    text-align: start;
+  `,
+}));
+const { Paragraph } = Typography;
+
+interface TopicContentProps {
+  active?: boolean;
+  id: string;
+  showMore?: boolean;
+  title: string;
+}
+
+const Content = memo<TopicContentProps>(({ id, title, active, showMore }) => {
+  const { t } = useTranslation(['thread', 'common']);
+
+  const mobile = useIsMobile();
+
+  const [editing, updateThreadTitle, removeThread] = useChatStore((s) => [
+    s.threadRenamingId === id,
+    s.updateThreadTitle,
+    s.removeThread,
+  ]);
+  const { styles, cx } = useStyles();
+
+  const toggleEditing = (visible?: boolean) => {
+    useChatStore.setState({ threadRenamingId: visible ? id : '' });
+  };
+
+  const { modal } = App.useApp();
+
+  const items = useMemo<MenuProps['items']>(
+    () => [
+      {
+        icon: <Icon icon={PencilLine} />,
+        key: 'rename',
+        label: t('rename', { ns: 'common' }),
+        onClick: () => {
+          toggleEditing(true);
+        },
+      },
+      {
+        type: 'divider',
+      },
+      {
+        danger: true,
+        icon: <Icon icon={Trash} />,
+        key: 'delete',
+        label: t('delete', { ns: 'common' }),
+        onClick: () => {
+          if (!id) return;
+
+          modal.confirm({
+            centered: true,
+            okButtonProps: { danger: true },
+            onOk: async () => {
+              await removeThread(id);
+            },
+            title: t('actions.confirmRemoveThread'),
+          });
+        },
+      },
+    ],
+    [],
+  );
+
+  return (
+    <Flexbox
+      align={'center'}
+      gap={8}
+      horizontal
+      justify={'space-between'}
+      onDoubleClick={(e) => {
+        if (!id) return;
+        if (e.altKey) toggleEditing(true);
+      }}
+    >
+      {!editing ? (
+        title === LOADING_FLAT ? (
+          <Flexbox flex={1} height={28} justify={'center'}>
+            <BubblesLoading />
+          </Flexbox>
+        ) : (
+          <Paragraph
+            className={cx(styles.title, active && styles.active)}
+            ellipsis={{ rows: 1, tooltip: { placement: 'left', title } }}
+            style={{ margin: 0 }}
+          >
+            {title}
+          </Paragraph>
+        )
+      ) : (
+        <EditableText
+          editing={editing}
+          onChangeEnd={(v) => {
+            if (title !== v) {
+              updateThreadTitle(id, v);
+            }
+            toggleEditing(false);
+          }}
+          onEditingChange={toggleEditing}
+          showEditIcon={false}
+          size={'small'}
+          style={{
+            height: 28,
+          }}
+          type={'pure'}
+          value={title}
+        />
+      )}
+      {(showMore || mobile) && !editing && (
+        <Dropdown
+          arrow={false}
+          menu={{
+            items: items,
+            onClick: ({ domEvent }) => {
+              domEvent.stopPropagation();
+            },
+          }}
+          trigger={['click']}
+        >
+          <ActionIcon
+            className="topic-more"
+            icon={MoreVertical}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            size={'small'}
+          />
+        </Dropdown>
+      )}
+    </Flexbox>
+  );
+});
+
+export default Content;

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/ThreadItem/index.tsx

@@ -0,0 +1,98 @@
+import { createStyles } from 'antd-style';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { useGlobalStore } from '@/store/global';
+
+import Content from './Content';
+
+const useStyles = createStyles(({ css, token, isDarkMode }, index: number) => ({
+  active: css`
+    background: ${isDarkMode ? token.colorFillSecondary : token.colorFillTertiary};
+    transition: background 200ms ${token.motionEaseOut};
+
+    &:hover {
+      background: ${token.colorFill};
+    }
+  `,
+  container: css`
+    margin-inline: 8px;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      inset-block: 50px ${index * 40 + 20}px;
+      inset-inline-start: 26px;
+
+      width: 18px;
+
+      border-block-end: 2px solid ${token.colorBorderSecondary};
+      border-inline-start: 2px solid ${token.colorBorderSecondary};
+      border-end-start-radius: 8px;
+    }
+
+    &.thread-item {
+      width: calc(100% - 16px);
+    }
+  `,
+  split: css`
+    border-block-end: 1px solid ${token.colorSplit};
+  `,
+  wrapper: css`
+    cursor: pointer;
+
+    width: calc(100% - 36px);
+    margin-block: 2px;
+    padding-block: 4px;
+    padding-inline: 8px;
+
+    border-radius: ${token.borderRadius}px;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+}));
+
+export interface ThreadItemProps {
+  id: string;
+  index: number;
+  title: string;
+}
+
+const ThreadItem = memo<ThreadItemProps>(({ title, id, index }) => {
+  const { styles, cx } = useStyles(index);
+  const toggleConfig = useGlobalStore((s) => s.toggleMobileTopic);
+  const [toggleThread, activeThreadId] = useChatStore((s) => [s.switchThread, s.activeThreadId]);
+  const [isHover, setHovering] = useState(false);
+
+  const active = id === activeThreadId;
+  return (
+    <Flexbox className={cx(styles.container, 'thread-item')} horizontal>
+      <Flexbox height={36} width={36} />
+      <Flexbox
+        align={'center'}
+        className={cx(styles.wrapper, active && styles.active)}
+        distribution={'space-between'}
+        flex={1}
+        horizontal
+        onClick={() => {
+          toggleThread(id);
+          toggleConfig(false);
+        }}
+        onMouseEnter={() => {
+          setHovering(true);
+        }}
+        onMouseLeave={() => {
+          setHovering(false);
+        }}
+      >
+        {<Content active={active} id={id} showMore={isHover} title={title} />}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ThreadItem;