@lobehub/chat 1.33.5 → 1.34.1

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/{TopicItem.tsx → TopicItem/index.tsx}

@@ -3,8 +3,10 @@ import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
+import { threadSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
 
+import ThreadItem from '../ThreadItem';
 import DefaultContent from './DefaultContent';
 import TopicContent from './TopicContent';
 
@@ -43,37 +45,46 @@ export interface ConfigCellProps {
   active?: boolean;
   fav?: boolean;
   id?: string;
+  threadId?: string;
   title: string;
 }
 
-const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav }) => {
+const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav, threadId }) => {
   const { styles, cx } = useStyles();
   const toggleConfig = useGlobalStore((s) => s.toggleMobileTopic);
   const [toggleTopic] = useChatStore((s) => [s.switchTopic]);
   const [isHover, setHovering] = useState(false);
 
+  const threads = useChatStore(threadSelectors.getThreadsByTopic(id));
+
   return (
-    <Flexbox
-      align={'center'}
-      className={cx(styles.container, 'topic-item', active && styles.active)}
-      distribution={'space-between'}
-      horizontal
-      onClick={() => {
-        toggleTopic(id);
-        toggleConfig(false);
-      }}
-      onMouseEnter={() => {
-        setHovering(true);
-      }}
-      onMouseLeave={() => {
-        setHovering(false);
-      }}
-    >
-      {!id ? (
-        <DefaultContent />
-      ) : (
-        <TopicContent fav={fav} id={id} showMore={isHover} title={title} />
-      )}
+    <Flexbox style={{ position: 'relative' }}>
+      <Flexbox
+        align={'center'}
+        className={cx(styles.container, 'topic-item', active && !threadId && styles.active)}
+        distribution={'space-between'}
+        horizontal
+        onClick={() => {
+          toggleTopic(id);
+          toggleConfig(false);
+        }}
+        onMouseEnter={() => {
+          setHovering(true);
+        }}
+        onMouseLeave={() => {
+          setHovering(false);
+        }}
+      >
+        {!id ? (
+          <DefaultContent />
+        ) : (
+          <TopicContent fav={fav} id={id} showMore={isHover} title={title} />
+        )}
+      </Flexbox>
+      {active &&
+        threads?.map((item, index) => (
+          <ThreadItem id={item.id} index={index} key={item.id} title={item.title} />
+        ))}
     </Flexbox>
   );
 });

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

@@ -12,7 +12,7 @@ import {
   CHAT_PORTAL_WIDTH,
 } from '@/const/layoutTokens';
 import { useChatStore } from '@/store/chat';
-import { chatPortalSelectors } from '@/store/chat/slices/portal/selectors';
+import { chatPortalSelectors, portalThreadSelectors } from '@/store/chat/selectors';
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   content: css`
@@ -32,16 +32,21 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     height: 100%;
     background: ${isDarkMode ? rgba(token.colorBgElevated, 0.8) : token.colorBgElevated};
   `,
+
+  thread: css`
+    background: ${token.colorBgLayout};
+  `,
 }));
 
 const PortalPanel = memo(({ children }: PropsWithChildren) => {
-  const { styles } = useStyles();
+  const { styles, cx } = useStyles();
   const { md = true } = useResponsive();
 
-  const [showInspector, showToolUI, showArtifactUI] = useChatStore((s) => [
+  const [showInspector, showToolUI, showArtifactUI, showThread] = useChatStore((s) => [
     chatPortalSelectors.showPortal(s),
     chatPortalSelectors.showPluginUI(s),
     chatPortalSelectors.showArtifactUI(s),
+    portalThreadSelectors.showThread(s),
   ]);
 
   return (
@@ -54,7 +59,9 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
         expand
         hanlderStyle={{ display: 'none' }}
         maxWidth={CHAT_PORTAL_MAX_WIDTH}
-        minWidth={showArtifactUI || showToolUI ? CHAT_PORTAL_TOOL_UI_WIDTH : CHAT_PORTAL_WIDTH}
+        minWidth={
+          showArtifactUI || showToolUI || showThread ? CHAT_PORTAL_TOOL_UI_WIDTH : CHAT_PORTAL_WIDTH
+        }
         mode={md ? 'fixed' : 'float'}
         placement={'right'}
         showHandlerWhenUnexpand={false}
@@ -68,7 +75,7 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
             minWidth: CHAT_PORTAL_WIDTH,
           }}
         >
-          <Flexbox className={styles.panel}>{children}</Flexbox>
+          <Flexbox className={cx(styles.panel, showThread && styles.thread)}>{children}</Flexbox>
         </DraggablePanelContainer>
       </DraggablePanel>
     )

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

@@ -2,7 +2,6 @@ import MobileContentLayout from '@/components/server/MobileNavLayout';
 
 import { LayoutProps } from '../type';
 import ChatHeader from './ChatHeader';
-import PortalModal from './PortalModal';
 import TopicModal from './TopicModal';
 
 const Layout = ({ children, topic, conversation, portal }: LayoutProps) => {
@@ -13,7 +12,7 @@ const Layout = ({ children, topic, conversation, portal }: LayoutProps) => {
         {children}
       </MobileContentLayout>
       <TopicModal>{topic}</TopicModal>
-      <PortalModal>{portal}</PortalModal>
+      {portal}
     </>
   );
 };

package/src/const/message.ts

@@ -5,3 +5,5 @@ export const MESSAGE_CANCEL_FLAT = 'canceled';
 export const MESSAGE_THREAD_DIVIDER_ID = '__THREAD_DIVIDER__';
 
 export const MESSAGE_WELCOME_GUIDE_ID = 'welcome';
+
+export const THREAD_DRAFT_ID = '__THREAD_DRAFT_ID__';

package/src/const/settings/systemAgent.ts

@@ -24,6 +24,7 @@ export const DEFAULT_SYSTEM_AGENT_CONFIG: UserSystemAgentConfig = {
   agentMeta: DEFAULT_SYSTEM_AGENT_ITEM,
   historyCompress: DEFAULT_SYSTEM_AGENT_ITEM,
   queryRewrite: DEFAULT_QUERY_REWRITE_SYSTEM_AGENT_ITEM,
+  thread: DEFAULT_SYSTEM_AGENT_ITEM,
   topic: DEFAULT_SYSTEM_AGENT_ITEM,
   translation: DEFAULT_SYSTEM_AGENT_ITEM,
 };

package/src/database/server/migrations/0012_add_thread.sql

@@ -0,0 +1,39 @@
+CREATE TABLE IF NOT EXISTS "threads" (
+	"id" text PRIMARY KEY NOT NULL,
+	"title" text,
+	"type" text NOT NULL,
+	"status" text DEFAULT 'active',
+	"topic_id" text NOT NULL,
+	"source_message_id" text NOT NULL,
+	"parent_thread_id" text,
+	"user_id" text NOT NULL,
+	"last_active_at" timestamp with time zone DEFAULT now(),
+	"accessed_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"updated_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "messages" ADD COLUMN "thread_id" text;--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "threads" ADD CONSTRAINT "threads_topic_id_topics_id_fk" FOREIGN KEY ("topic_id") REFERENCES "public"."topics"("id") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "threads" ADD CONSTRAINT "threads_parent_thread_id_threads_id_fk" FOREIGN KEY ("parent_thread_id") REFERENCES "public"."threads"("id") ON DELETE set null ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "threads" ADD CONSTRAINT "threads_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "messages" ADD CONSTRAINT "messages_thread_id_threads_id_fk" FOREIGN KEY ("thread_id") REFERENCES "public"."threads"("id") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;