Merge branch 'x-bot-proconfig' of github.com:myshell-ai/ShellAgent in…

…to dev-x-bot
myshell-ai · Jan 15, 2025 · 6adcd2c · 6adcd2c
2 parents 9902280 + 8977364
commit 6adcd2c
Show file tree

Hide file tree

Showing 73 changed files with 6,882 additions and 437 deletions.
diff --git a/web/apps/web/src/app/app/detail/page.tsx b/web/apps/web/src/app/app/detail/page.tsx
@@ -11,7 +11,14 @@ import { useEffect, useRef } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
-import { edgeTypes, materialList, nodeTypes } from '@/components/app/constants';
+import {
+  edgeTypes,
+  materialList,
+  xMaterialList,
+  nodeTypes,
+  xNodeTypes,
+  xEdgeTypes,
+} from '@/components/app/constants';
 import FlowHeader from '@/components/app/flow-header';
 import { Header } from '@/components/app/header';
 import { ComfyUIEditorModal } from '@/components/app/plugins/comfyui/widgets/comfyui-editor';
@@ -38,6 +45,13 @@ const TransitionSheet = dynamic(
   },
 );
 
+const TransitionSheetNew = dynamic(
+  () => import('@/components/app/new-transition-sheet'),
+  {
+    ssr: false,
+  },
+);
+
 const ChatSheet = dynamic(() => import('@/components/app/chat-sheet'), {
   ssr: false,
 });
@@ -101,15 +115,18 @@ const FlowEngineWrapper = observer(
           appBuilder.initAppBuilderLoading || appBuilder.fetchFlowListLoading
         }
         ref={flowRef}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        materialList={materialList}
+        nodeTypes={appBuilder.appType === 'x_bot' ? xNodeTypes : nodeTypes}
+        edgeTypes={appBuilder.appType === 'x_bot' ? xEdgeTypes : edgeTypes}
+        materialList={
+          appBuilder.appType === 'x_bot' ? xMaterialList : materialList
+        }
         footerExtra={<ListFooterExtra />}
         header={
           <div onDoubleClick={e => e.stopPropagation()}>
             <FlowHeader appId={appId} versionName={versionName} />
             <StateConfigSheet />
             <TransitionSheet />
+            <TransitionSheetNew />
             <ValidationDialog />
           </div>
         }

diff --git a/web/apps/web/src/app/app/page.tsx b/web/apps/web/src/app/app/page.tsx
@@ -1,84 +1,54 @@
 'use client';
 
 import '../reflect-metadata-client-side';
-import { Heading, Spinner, Text } from '@shellagent/ui';
+import { Heading } from '@shellagent/ui';
 import { useScroll } from 'ahooks';
 import { useInjection } from 'inversify-react';
 import { useEffect, useRef } from 'react';
-import useSWR from 'swr';
 
 import { CreateDialog } from '@/components/home/create-dialog';
-import { FlowCard } from '@/components/home/flow-card';
 import { ImportDialog } from '@/components/home/import-dialog';
-import { SettingsModel } from '@/components/settings/settings.model';
-import { fetchList } from '@/services/home';
+import { CardList } from '@/components/home/card-list';
+import { FilterTabs } from '@/components/home/filter-tabs';
 import { cn } from '@/utils/cn';
+import { HomeModel } from '@/stores/home/models/home-model';
 
 export default function AppPage() {
   const contentRef = useRef(null);
   const position = useScroll(contentRef);
+  const homeModel = useInjection(HomeModel);
 
-  const settingsModel = useInjection(SettingsModel);
   useEffect(() => {
-    (async function () {
-      await settingsModel.getIsBetaCheck();
-      const isAutoCheck = await settingsModel.getAutoCheck();
-      if (isAutoCheck) {
-        settingsModel.autoCheck();
-      }
-    })();
+    homeModel.autoCheck();
+    homeModel.fetchList({ type: 'app' });
   }, []);
 
-  const { data, isLoading, mutate } = useSWR('/api/list?type=app', () =>
-    fetchList({ type: 'app' }),
-  );
-
   const onRefresh = () => {
-    mutate();
+    homeModel.refreshList({ type: 'app' });
   };
 
   return (
     <div className="h-full flex flex-col">
       <div
         className={cn(
-          'h-16 flex justify-between items-center px-6 border-b',
+          'flex flex-col border-b px-6',
           position?.top && position?.top > 0
             ? 'border-default'
             : 'border-transparent',
         )}>
-        <Heading size="h2">App</Heading>
-        <div className="flex gap-x-2">
-          <CreateDialog onSuccess={onRefresh} type="app" />
-          <ImportDialog onSuccess={onRefresh} type="app" />
+        <div className="flex justify-between items-center py-4 h-16">
+          <Heading size="h2">App</Heading>
+          <div className="flex gap-x-2">
+            <CreateDialog onSuccess={onRefresh} type="app" />
+            <ImportDialog onSuccess={onRefresh} type="app" />
+          </div>
+        </div>
+        <div className="w-full">
+          <FilterTabs className="w-full" />
         </div>
       </div>
       <main className="w-full h-full overflow-auto" ref={contentRef}>
-        {isLoading && (
-          <div className="w-full h-full flex items-center justify-center">
-            <Spinner className="text-brand" />
-          </div>
-        )}
-        {!isLoading && data?.data.length ? (
-          <div className="px-6 py-4 grid lg:grid-cols-3 large:grid-cols-4 2xl:grid-cols-5 gap-4 mb-6">
-            {data?.data.map(item => (
-              <FlowCard
-                type="app"
-                key={item.id}
-                {...item}
-                onSuccess={onRefresh}
-              />
-            ))}
-          </div>
-        ) : null}
-        {!isLoading && !data?.data.length && (
-          <div className="grow w-full h-full flex flex-col justify-center items-center">
-            <Heading size="h2">Create your first App</Heading>
-            <Text size="sm" color="subtle" className="mt-1.5 mb-6">
-              Click button to create a app
-            </Text>
-            <CreateDialog size="lg" onSuccess={onRefresh} type="app" />
-          </div>
-        )}
+        <CardList type="app" onRefresh={onRefresh} />
       </main>
     </div>
   );

diff --git a/web/apps/web/src/app/container.ts b/web/apps/web/src/app/container.ts
@@ -8,6 +8,7 @@ import { Container, ContainerModule, interfaces } from 'inversify';
 import * as Mobx from 'mobx';
 import { toast } from 'react-toastify';
 
+import { HomeModel } from '@/stores/home/models/home-model';
 import { ComfyUIModel } from '@/components/app/plugins/comfyui/comfyui.model';
 import { AssistantModel } from '@/components/assistant/model';
 import { AppBuilderChatModel } from '@/components/chat/app-builder-chat.model';
@@ -22,6 +23,7 @@ import { WidgetsInstalledModel } from '@/components/manager/manager-content/widg
 import { WidgetsMarketplaceModel } from '@/components/manager/manager-content/widgets/widgets-marketplace.model';
 import { SettingsModel } from '@/components/settings/settings.model';
 import { AppBuilderModel } from '@/stores/app/models/app-builder.model';
+import { FlowModel } from '@/stores/app/models/flow.model';
 import { FormEngineModel } from '@/utils/form-engine.model';
 import { FormikModel } from '@/utils/formik.model';
 import { ModalModel } from '@/utils/modal.model';
@@ -103,6 +105,8 @@ export const webModule = new ContainerModule(bind => {
 
   bind<ComfyUIModel>('ComfyUIModel').to(ComfyUIModel).inSingletonScope();
 
+  bind(HomeModel).toSelf().inSingletonScope();
+
   // refactor app builder
   container
     .bind<AppBuilderModel>('AppBuilderModel')
@@ -136,6 +140,8 @@ export const webModule = new ContainerModule(bind => {
     return () => context.container.get<AppBuilderModel>('AppBuilderModel');
   });
 
+  bind(FlowModel).toSelf().inSingletonScope();
+
   // assistant
   bind(AssistantModel).toSelf().inSingletonScope();
   // feedback