@lobehub/chat 1.33.5 → 1.34.0

package/src/database/server/migrations/meta/_journal.json

@@ -84,6 +84,13 @@
       "when": 1731138670427,
       "tag": "0011_add_topic_history_summary",
       "breakpoints": true
+    },
+    {
+      "idx": 12,
+      "version": "7",
+      "when": 1731858381716,
+      "tag": "0012_add_thread",
+      "breakpoints": true
     }
   ],
   "version": "6"

package/src/database/server/models/_template.ts

@@ -3,7 +3,7 @@ import { and, desc } from 'drizzle-orm/expressions';
 
 import { serverDB } from '@/database/server';
 
-import { NewSessionGroup, UserItem, sessionGroups } from '../schemas/lobechat';
+import { NewSessionGroup, SessionGroupItem, sessionGroups } from '../schemas/lobechat';
 
 export class TemplateModel {
   private userId: string;
@@ -44,7 +44,7 @@ export class TemplateModel {
     });
   };
 
-  async update(id: string, value: Partial<UserItem>) {
+  async update(id: string, value: Partial<SessionGroupItem>) {
     return serverDB
       .update(sessionGroups)
       .set({ ...value, updatedAt: new Date() })

package/src/database/server/models/message.ts

@@ -69,6 +69,7 @@ export class MessageModel {
         updatedAt: messages.updatedAt,
 
         parentId: messages.parentId,
+        threadId: messages.threadId,
 
         tools: messages.tools,
         tool_call_id: messagePlugins.toolCallId,

package/src/database/server/models/thread.ts

@@ -0,0 +1,79 @@
+import { eq } from 'drizzle-orm';
+import { and, desc } from 'drizzle-orm/expressions';
+
+import { serverDB } from '@/database/server';
+import { CreateThreadParams, ThreadStatus } from '@/types/topic';
+
+import { ThreadItem, threads } from '../schemas/lobechat';
+
+const queryColumns = {
+  createdAt: threads.createdAt,
+  id: threads.id,
+  parentThreadId: threads.parentThreadId,
+  sourceMessageId: threads.sourceMessageId,
+  status: threads.status,
+  title: threads.title,
+  topicId: threads.topicId,
+  type: threads.type,
+  updatedAt: threads.updatedAt,
+};
+
+export class ThreadModel {
+  private userId: string;
+
+  constructor(userId: string) {
+    this.userId = userId;
+  }
+
+  create = async (params: CreateThreadParams) => {
+    // @ts-ignore
+    const [result] = await serverDB
+      .insert(threads)
+      .values({ ...params, status: ThreadStatus.Active, userId: this.userId })
+      .onConflictDoNothing()
+      .returning();
+
+    return result;
+  };
+
+  delete = async (id: string) => {
+    return serverDB.delete(threads).where(and(eq(threads.id, id), eq(threads.userId, this.userId)));
+  };
+
+  deleteAll = async () => {
+    return serverDB.delete(threads).where(eq(threads.userId, this.userId));
+  };
+
+  query = async () => {
+    const data = await serverDB
+      .select(queryColumns)
+      .from(threads)
+      .where(eq(threads.userId, this.userId))
+      .orderBy(desc(threads.updatedAt));
+
+    return data as ThreadItem[];
+  };
+
+  queryByTopicId = async (topicId: string) => {
+    const data = await serverDB
+      .select(queryColumns)
+      .from(threads)
+      .where(and(eq(threads.topicId, topicId), eq(threads.userId, this.userId)))
+      .orderBy(desc(threads.updatedAt));
+
+    return data as ThreadItem[];
+  };
+
+  findById = async (id: string) => {
+    return serverDB.query.threads.findFirst({
+      where: and(eq(threads.id, id), eq(threads.userId, this.userId)),
+    });
+  };
+
+  async update(id: string, value: Partial<ThreadItem>) {
+    return serverDB
+      .update(threads)
+      .set({ ...value, updatedAt: new Date() })
+      .where(and(eq(threads.id, id), eq(threads.userId, this.userId)));
+  }
+}

package/src/database/server/schemas/lobechat/message.ts

@@ -18,7 +18,7 @@ import { agents } from './agent';
 import { files } from './file';
 import { chunks, embeddings } from './rag';
 import { sessions } from './session';
-import { topics } from './topic';
+import { threads, topics } from './topic';
 import { users } from './user';
 
 // @ts-ignore
@@ -51,6 +51,7 @@ export const messages = pgTable(
       .notNull(),
     sessionId: text('session_id').references(() => sessions.id, { onDelete: 'cascade' }),
     topicId: text('topic_id').references(() => topics.id, { onDelete: 'cascade' }),
+    threadId: text('thread_id').references(() => threads.id, { onDelete: 'cascade' }),
     // @ts-ignore
     parentId: text('parent_id').references(() => messages.id, { onDelete: 'set null' }),
     quotaId: text('quota_id').references(() => messages.id, { onDelete: 'set null' }),

package/src/database/server/schemas/lobechat/relations.ts

@@ -8,7 +8,7 @@ import { files, knowledgeBases } from './file';
 import { messages, messagesFiles } from './message';
 import { unstructuredChunks } from './rag';
 import { sessionGroups, sessions } from './session';
-import { topics } from './topic';
+import { threads, topics } from './topic';
 
 export const agentsToSessions = pgTable(
   'agents_to_sessions',
@@ -47,6 +47,13 @@ export const topicRelations = relations(topics, ({ one }) => ({
   }),
 }));
 
+export const threadsRelations = relations(threads, ({ one }) => ({
+  sourceMessage: one(messages, {
+    fields: [threads.sourceMessageId],
+    references: [messages.id],
+  }),
+}));
+
 export const messagesRelations = relations(messages, ({ many, one }) => ({
   filesToMessages: many(messagesFiles),
 
@@ -64,6 +71,11 @@ export const messagesRelations = relations(messages, ({ many, one }) => ({
     fields: [messages.topicId],
     references: [topics.id],
   }),
+
+  thread: one(threads, {
+    fields: [messages.threadId],
+    references: [threads.id],
+  }),
 }));
 
 export const agentsRelations = relations(agents, ({ many }) => ({

package/src/database/server/schemas/lobechat/topic.ts

@@ -1,8 +1,9 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix  */
 import { boolean, jsonb, pgTable, text, unique } from 'drizzle-orm/pg-core';
+import { createInsertSchema } from 'drizzle-zod';
 
 import { idGenerator } from '../../utils/idGenerator';
-import { timestamps } from './_helpers';
+import { timestamps, timestamptz } from './_helpers';
 import { sessions } from './session';
 import { users } from './user';
 
@@ -30,3 +31,31 @@ export const topics = pgTable(
 
 export type NewTopic = typeof topics.$inferInsert;
 export type TopicItem = typeof topics.$inferSelect;
+
+// @ts-ignore
+export const threads = pgTable('threads', {
+  id: text('id')
+    .$defaultFn(() => idGenerator('threads', 16))
+    .primaryKey(),
+
+  title: text('title'),
+  type: text('type', { enum: ['continuation', 'standalone'] }).notNull(),
+  status: text('status', { enum: ['active', 'deprecated', 'archived'] }).default('active'),
+  topicId: text('topic_id')
+    .references(() => topics.id, { onDelete: 'cascade' })
+    .notNull(),
+  sourceMessageId: text('source_message_id').notNull(),
+  // @ts-ignore
+  parentThreadId: text('parent_thread_id').references(() => threads.id, { onDelete: 'set null' }),
+
+  userId: text('user_id')
+    .references(() => users.id, { onDelete: 'cascade' })
+    .notNull(),
+
+  lastActiveAt: timestamptz('last_active_at').defaultNow(),
+  ...timestamps,
+});
+
+export type NewThread = typeof threads.$inferInsert;
+export type ThreadItem = typeof threads.$inferSelect;
+export const insertThreadSchema = createInsertSchema(threads);

package/src/database/server/utils/idGenerator.ts

@@ -10,6 +10,7 @@ const prefixes = {
   plugins: 'plg',
   sessionGroups: 'sg',
   sessions: 'ssn',
+  threads: 'thd',
   topics: 'tpc',
   user: 'user',
 } as const;

package/src/features/ChatInput/ActionBar/Token/TokenTag.tsx

@@ -10,7 +10,7 @@ import { useTokenCount } from '@/hooks/useTokenCount';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
+import { topicSelectors } from '@/store/chat/selectors';
 import { useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 import { useUserStore } from '@/store/user';
@@ -18,13 +18,15 @@ import { modelProviderSelectors } from '@/store/user/selectors';
 
 import TokenProgress from './TokenProgress';
 
-const Token = memo(() => {
+interface TokenTagProps {
+  total: string;
+}
+const Token = memo<TokenTagProps>(({ total: messageString }) => {
   const { t } = useTranslation(['chat', 'components']);
   const theme = useTheme();
 
-  const [input, messageString, historySummary] = useChatStore((s) => [
+  const [input, historySummary] = useChatStore((s) => [
     s.inputMessage,
-    chatSelectors.chatsMessageString(s),
     topicSelectors.currentActiveTopicSummary(s)?.content || '',
   ]);
 

package/src/features/ChatInput/ActionBar/Token/index.tsx

@@ -1,18 +1,37 @@
 import dynamic from 'next/dynamic';
-import { memo } from 'react';
+import { PropsWithChildren, memo } from 'react';
 
 import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/slices/chat';
+import { agentSelectors } from '@/store/agent/selectors';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors, threadSelectors } from '@/store/chat/selectors';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
 
 const LargeTokenContent = dynamic(() => import('./TokenTag'), { ssr: false });
 
-const Token = memo(() => {
+const Token = memo<PropsWithChildren>(({ children }) => {
   const model = useAgentStore(agentSelectors.currentAgentModel);
   const showTag = useUserStore(modelProviderSelectors.isModelHasMaxToken(model));
 
-  return showTag && <LargeTokenContent />;
+  return showTag && children;
 });
+export const MainToken = memo(() => {
+  const total = useChatStore(chatSelectors.mainAIChatsMessageString);
 
-export default Token;
+  return (
+    <Token>
+      <LargeTokenContent total={total} />
+    </Token>
+  );
+});
+
+export const PortalToken = memo(() => {
+  const total = useChatStore(threadSelectors.portalDisplayChatsString);
+
+  return (
+    <Token>
+      <LargeTokenContent total={total} />
+    </Token>
+  );
+});

package/src/features/ChatInput/ActionBar/config.ts

@@ -4,7 +4,7 @@ import History from './History';
 import Knowledge from './Knowledge';
 import ModelSwitch from './ModelSwitch';
 import Temperature from './Temperature';
-import Token from './Token';
+import { MainToken, PortalToken } from './Token';
 import Tools from './Tools';
 import Upload from './Upload';
 
@@ -13,10 +13,11 @@ export const actionMap = {
   fileUpload: Upload,
   history: History,
   knowledgeBase: Knowledge,
+  mainToken: MainToken,
   model: ModelSwitch,
+  portalToken: PortalToken,
   stt: STT,
   temperature: Temperature,
-  token: Token,
   tools: Tools,
 } as const;
 

package/src/features/ChatInput/Desktop/index.tsx

@@ -8,23 +8,31 @@ import { CHAT_TEXTAREA_HEIGHT, CHAT_TEXTAREA_MAX_HEIGHT } from '@/const/layoutTo
 
 import { ActionKeys } from '../ActionBar/config';
 import LocalFiles from './FilePreview';
-import Footer from './Footer';
 import Head from './Header';
 
+export type FooterRender = (params: {
+  expand: boolean;
+  onExpandChange: (expand: boolean) => void;
+}) => ReactNode;
+
 interface DesktopChatInputProps {
-  footer?: {
-    saveTopic?: boolean;
-    shortcutHint?: boolean;
-  };
   inputHeight: number;
   leftActions: ActionKeys[];
   onInputHeightChange?: (height: number) => void;
+  renderFooter: FooterRender;
   renderTextArea: (onSend: () => void) => ReactNode;
   rightActions: ActionKeys[];
 }
 
 const DesktopChatInput = memo<DesktopChatInputProps>(
-  ({ leftActions, rightActions, footer, renderTextArea, inputHeight, onInputHeightChange }) => {
+  ({
+    leftActions,
+    rightActions,
+    renderTextArea,
+    inputHeight,
+    onInputHeightChange,
+    renderFooter,
+  }) => {
     const [expand, setExpand] = useState<boolean>(false);
 
     const onSend = useCallback(() => {
@@ -63,7 +71,7 @@ const DesktopChatInput = memo<DesktopChatInputProps>(
               setExpand={setExpand}
             />
             {renderTextArea(onSend)}
-            <Footer expand={expand} setExpand={setExpand} {...footer} />
+            {renderFooter({ expand, onExpandChange: setExpand })}
           </Flexbox>
         </DraggablePanel>
       </>

package/src/features/ChatInput/Mobile/index.tsx

@@ -16,17 +16,17 @@ import Files from './Files';
 import InputArea from './InputArea';
 import SendButton from './Send';
 
-const defaultLeftActions = [
+const defaultLeftActions: ActionKeys[] = [
   'model',
   'fileUpload',
   'knowledgeBase',
   'temperature',
   'history',
   'tools',
-  'token',
-] as ActionKeys[];
+  'mainToken',
+];
 
-const defaultRightActions = ['clear'] as ActionKeys[];
+const defaultRightActions: ActionKeys[] = ['clear'];
 
 const MobileChatInput = memo(() => {
   const theme = useTheme();

package/src/features/Conversation/Actions/Assistant.tsx

@@ -1,17 +1,36 @@
 import { ActionIconGroup } from '@lobehub/ui';
-import { memo } from 'react';
+import { ActionIconGroupItems } from '@lobehub/ui/es/ActionIconGroup';
+import { memo, useContext, useMemo } from 'react';
 
+import { useChatStore } from '@/store/chat';
+import { threadSelectors } from '@/store/chat/selectors';
+
+import { InPortalThreadContext } from '../components/ChatItem/InPortalThreadContext';
 import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 import { RenderAction } from '../types';
 import { ErrorActionsBar } from './Error';
 import { useCustomActions } from './customAction';
 
-export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, error, tools }) => {
-  const { regenerate, edit, delAndRegenerate, copy, divider, del } = useChatListActionsBar();
+export const AssistantActionsBar: RenderAction = memo(({ onActionClick, error, tools, id }) => {
+  const [isThreadMode, hasThread] = useChatStore((s) => [
+    !!s.activeThreadId,
+    threadSelectors.hasThreadBySourceMsgId(id)(s),
+  ]);
+
+  const { regenerate, edit, delAndRegenerate, copy, divider, del, branching } =
+    useChatListActionsBar({ hasThread });
+
   const { translate, tts } = useCustomActions();
   const hasTools = !!tools;
 
-  if (id === 'default') return;
+  const inPortalThread = useContext(InPortalThreadContext);
+  const inThread = isThreadMode || inPortalThread;
+
+  const items = useMemo(() => {
+    if (hasTools) return [delAndRegenerate, copy];
+
+    return [edit, copy, inThread ? null : branching].filter(Boolean) as ActionIconGroupItems[];
+  }, [inThread, hasTools]);
 
   if (error) return <ErrorActionsBar onActionClick={onActionClick} />;
 
@@ -28,7 +47,7 @@ export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, erro
         delAndRegenerate,
         del,
       ]}
-      items={[hasTools ? delAndRegenerate : edit, copy]}
+      items={items}
       onActionClick={onActionClick}
       type="ghost"
     />

package/src/features/Conversation/Actions/User.tsx

@@ -1,18 +1,35 @@
 import { ActionIconGroup } from '@lobehub/ui';
-import { memo } from 'react';
+import { ActionIconGroupItems } from '@lobehub/ui/es/ActionIconGroup';
+import { memo, useContext, useMemo } from 'react';
 
+import { useChatStore } from '@/store/chat';
+import { threadSelectors } from '@/store/chat/slices/thread/selectors';
+
+import { InPortalThreadContext } from '../components/ChatItem/InPortalThreadContext';
 import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 import { RenderAction } from '../types';
 import { useCustomActions } from './customAction';
 
-export const UserActionsBar: RenderAction = memo(({ onActionClick }) => {
-  const { regenerate, edit, copy, divider, del } = useChatListActionsBar();
+export const UserActionsBar: RenderAction = memo(({ onActionClick, id }) => {
+  const [isThreadMode, hasThread] = useChatStore((s) => [
+    !!s.activeThreadId,
+    threadSelectors.hasThreadBySourceMsgId(id)(s),
+  ]);
+  const { regenerate, edit, copy, divider, del, branching } = useChatListActionsBar({ hasThread });
   const { translate, tts } = useCustomActions();
 
+  const inPortalThread = useContext(InPortalThreadContext);
+  const inThread = isThreadMode || inPortalThread;
+
+  const items = useMemo(
+    () => [regenerate, edit, inThread ? null : branching].filter(Boolean) as ActionIconGroupItems[],
+    [inThread],
+  );
+
   return (
     <ActionIconGroup
       dropdownMenu={[edit, copy, divider, tts, translate, divider, regenerate, del]}
-      items={[regenerate, edit]}
+      items={items}
       onActionClick={onActionClick}
       type="ghost"
     />

package/src/features/Conversation/Actions/index.ts

@@ -1,11 +1,6 @@
-import { App } from 'antd';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useChatStore } from '@/store/chat';
 import { MessageRoleType } from '@/types/message';
 
-import { OnActionsClick, RenderAction } from '../types';
+import { RenderAction } from '../types';
 import { AssistantActionsBar } from './Assistant';
 import { DefaultActionsBar } from './Fallback';
 import { ToolActionsBar } from './Tool';
@@ -17,63 +12,3 @@ export const renderActions: Record<MessageRoleType, RenderAction> = {
   tool: ToolActionsBar,
   user: UserActionsBar,
 };
-
-export const useActionsClick = (): OnActionsClick => {
-  const { t } = useTranslation('common');
-  const [
-    deleteMessage,
-    regenerateMessage,
-    translateMessage,
-    ttsMessage,
-    delAndRegenerateMessage,
-    copyMessage,
-  ] = useChatStore((s) => [
-    s.deleteMessage,
-    s.regenerateMessage,
-    s.translateMessage,
-    s.ttsMessage,
-    s.delAndRegenerateMessage,
-    s.copyMessage,
-  ]);
-  const { message } = App.useApp();
-
-  return useCallback<OnActionsClick>(async (action, { id, content, error }) => {
-    switch (action.key) {
-      case 'copy': {
-        await copyMessage(id, content);
-        message.success(t('copySuccess', { defaultValue: 'Copy Success' }));
-        break;
-      }
-
-      case 'del': {
-        deleteMessage(id);
-        break;
-      }
-
-      case 'regenerate': {
-        regenerateMessage(id);
-        // if this message is an error message, we need to delete it
-        if (error) deleteMessage(id);
-        break;
-      }
-
-      case 'delAndRegenerate': {
-        delAndRegenerateMessage(id);
-        break;
-      }
-
-      case 'tts': {
-        ttsMessage(id);
-        break;
-      }
-    }
-
-    if (action.keyPath.at(-1) === 'translate') {
-      // click the menu item with translate item, the result is:
-      // key: 'en-US'
-      // keyPath: ['en-US','translate']
-      const lang = action.keyPath[0];
-      translateMessage(id, lang);
-    }
-  }, []);
-};

package/src/features/Conversation/Messages/{Tool → Assistant/ToolCallItem}/Inspector/index.tsx

@@ -34,6 +34,7 @@ export interface InspectorProps {
   loading?: boolean;
   payload?: ChatPluginPayload;
   setShow?: (showRender: boolean) => void;
+  showPortal?: boolean;
   showRender?: boolean;
 }
 
@@ -47,6 +48,7 @@ const Inspector = memo<InspectorProps>(
     content,
     identifier = 'unknown',
     id,
+    showPortal = true,
   }) => {
     const { t } = useTranslation(['plugin', 'portal']);
     const { styles } = useStyles();
@@ -111,7 +113,7 @@ const Inspector = memo<InspectorProps>(
           </Flexbox>
 
           <Flexbox horizontal>
-            {!isMobile && showRightAction && (
+            {!isMobile && showRightAction && showPortal && (
               <ActionIcon
                 icon={BetweenVerticalStart}
                 onClick={() => {

package/src/features/Conversation/Messages/{Tool/index.tsx → Assistant/ToolCallItem/Tool.tsx}

@@ -1,8 +1,8 @@
 import { Icon } from '@lobehub/ui';
-import { ConfigProvider, Empty, Skeleton } from 'antd';
+import { ConfigProvider, Empty } from 'antd';
 import { useTheme } from 'antd-style';
 import { LucideSquareArrowLeft, LucideSquareArrowRight } from 'lucide-react';
-import { Suspense, memo, useContext, useState } from 'react';
+import { memo, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -11,10 +11,14 @@ import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors, chatSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
 
-import Arguments from '../components/Arguments';
+import Arguments from '../../components/Arguments';
 import Inspector from './Inspector';
 
-const Message = memo<ChatMessage>(({ id, content, pluginState, plugin }) => {
+const Tool = memo<
+  ChatMessage & {
+    showPortal?: boolean;
+  }
+>(({ id, content, pluginState, plugin, showPortal }) => {
   const [loading, isMessageToolUIOpen] = useChatStore((s) => [
     chatSelectors.isPluginApiInvoking(id)(s),
     chatPortalSelectors.isPluginUIOpen(id)(s),
@@ -35,6 +39,7 @@ const Message = memo<ChatMessage>(({ id, content, pluginState, plugin }) => {
         loading={loading}
         payload={plugin}
         setShow={setShow}
+        showPortal={showPortal}
         showRender={showRender}
       />
       {isMessageToolUIOpen ? (
@@ -69,10 +74,4 @@ const Message = memo<ChatMessage>(({ id, content, pluginState, plugin }) => {
   );
 });
 
-export const ToolMessage = memo<ChatMessage>((props) => (
-  <Suspense
-    fallback={<Skeleton.Button active style={{ height: 46, minWidth: 200, width: '100%' }} />}
-  >
-    <Message {...props} />
-  </Suspense>
-));
+export default Tool;

package/src/features/Conversation/Messages/Assistant/ToolCallItem/index.tsx

@@ -13,8 +13,8 @@ import { chatSelectors } from '@/store/chat/selectors';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 
-import { ToolMessage } from '../../Tool';
 import Arguments from '../../components/Arguments';
+import ToolMessage from './Tool';
 import { useStyles } from './style';
 
 export interface InspectorProps {
@@ -24,13 +24,15 @@ export interface InspectorProps {
   identifier: string;
   index: number;
   messageId: string;
+  showPortal?: boolean;
   style?: CSSProperties;
 }
 
 const CallItem = memo<InspectorProps>(
-  ({ arguments: requestArgs, apiName, messageId, id, index, identifier, style }) => {
+  ({ arguments: requestArgs, apiName, messageId, id, index, identifier, style, showPortal }) => {
     const { t } = useTranslation('plugin');
     const { styles } = useStyles();
+
     const [open, setOpen] = useState(false);
     const loading = useChatStore(chatSelectors.isToolCallStreaming(messageId, index));
     const toolMessage = useChatStore(chatSelectors.getMessageByToolCallId(id));
@@ -42,7 +44,7 @@ const CallItem = memo<InspectorProps>(
 
     // when tool calling stop streaming, we should show the tool message
     return !loading && toolMessage ? (
-      <ToolMessage {...toolMessage} />
+      <ToolMessage {...toolMessage} showPortal={showPortal} />
     ) : (
       <Flexbox gap={8} style={style}>
         <Flexbox