Feat/update process flow display

.claude/settings.json

@@ -0,0 +1,5 @@
+{
+  "enabledPlugins": {
+    "frontend-design@claude-plugins-official": true
+  }
+}

.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(grep -n \"export.*RichTreeView\\\\|export.*TreeItem\\\\|export.*WorkflowTreeView\" /c/Users/Henry/Codes/FlowiseChatEmbed/src/components/treeview/*.tsx)",
+      "Bash(npx tsc:*)",
+      "Bash(npx vite:*)",
+      "Bash(grep:*)",
+      "Bash(node:*)"
+    ]
+  }
+}

dist/components/Bot.d.ts

@@ -80,6 +80,7 @@ export type MessageType = {
 };
 type observerConfigType = (accessor: string | boolean | object | MessageType[]) => void;
 export type observersConfigType = Record<'observeUserInput' | 'observeLoading' | 'observeMessages', observerConfigType>;
+export declare const CHAT_HEADER_HEIGHT = 50;
 export type BotProps = {
     chatflowid: string;
     apiHost?: string;

dist/components/treeview/AgentflowIcons.d.ts

@@ -0,0 +1,15 @@
+import { JSXElement } from 'solid-js';
+type IconProps = {
+    size?: number;
+    color?: string;
+};
+export declare const MaximizeIcon: (props: IconProps) => import("solid-js").JSX.Element;
+type AgentflowIconEntry = {
+    name: string;
+    icon: (props: IconProps) => JSXElement;
+    color: string;
+};
+export declare const AGENTFLOW_ICONS: AgentflowIconEntry[];
+export declare function getAgentflowIcon(name: string): AgentflowIconEntry | null;
+export {};
+//# sourceMappingURL=AgentflowIcons.d.ts.map

dist/components/treeview/NodeDetailsDialog.d.ts

@@ -0,0 +1,18 @@
+type NodeDetailsDialogProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    node: {
+        label: string;
+        name: string;
+        status: string;
+        data: any;
+    } | null;
+    backgroundColor?: string;
+    textColor?: string;
+    apiHost?: string;
+    chatflowid?: string;
+    chatId?: string;
+};
+export declare const NodeDetailsDialog: (props: NodeDetailsDialogProps) => import("solid-js").JSX.Element;
+export {};
+//# sourceMappingURL=NodeDetailsDialog.d.ts.map

dist/components/treeview/RichTreeView.d.ts

@@ -1,5 +1,4 @@
 import { JSXElement } from 'solid-js';
-import './TreeView.css';
 type RichTreeViewProps = {
     children: JSXElement;
     defaultExpanded?: string[];
@@ -18,6 +17,7 @@ type TreeItemProps = {
     expandedIcon?: JSXElement;
     endIcon?: JSXElement;
     isLeaf?: boolean;
+    borderColor?: string;
 };
 export declare const TreeItem: (props: TreeItemProps) => import("solid-js").JSX.Element;
 export {};

dist/components/treeview/WorkflowTreeView.d.ts

@@ -14,6 +14,9 @@ type WorkflowTreeViewProps = {
     backgroundColor?: string;
     textColor?: string;
     fontSize?: number;
+    apiHost?: string;
+    chatflowid?: string;
+    chatId?: string;
 };
 export declare const WorkflowTreeView: (props: WorkflowTreeViewProps) => import("solid-js").JSX.Element;
 export {};

package.json

@@ -20,10 +20,12 @@
     "@babel/core": "^7.22.1",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@ts-stack/markdown": "^1.4.0",
+    "@types/dompurify": "^3.2.0",
     "axios": "^1.7.7",
     "cors": "^2.8.5",
     "cross-env": "^7.0.3",
     "device-detector-js": "^3.0.3",
+    "dompurify": "^3.3.2",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
     "form-data": "^4.0.1",