[Feat]: AI Chat component enhancements

client/package.json

@@ -57,7 +57,7 @@
     "shelljs": "^0.8.5",
     "svgo": "^3.0.0",
     "ts-node": "^10.4.0",
-    "typescript": "^4.8.4",
+    "typescript": "^5.6.2",
     "whatwg-fetch": "^3.6.2"
   },
   "lint-staged": {

client/packages/lowcoder-design/src/icons/index.tsx

@@ -1,5 +1,8 @@
 import React, { lazy, Suspense } from "react";
 
+export { ReactComponent as AIGenerate } from "./remix/ai-generate.svg";
+export { ReactComponent as AIGenerate2 } from "./remix/ai-generate-2.svg";
+export { ReactComponent as AIGenerateText } from "./remix/ai-generate-text.svg";
 export { ReactComponent as AppSnapshotIcon } from "./v1/app-snapshot.svg";
 export { ReactComponent as ArchiveIcon } from "./remix/archive-fill.svg";
 export { ReactComponent as HookCompDropIcon } from "./v1/hook-comp-drop.svg";

client/packages/lowcoder/.eslintrc

@@ -1,6 +1,9 @@
 {
   "extends": ["react-app"],
   "plugins": ["only-ascii"],
+  "parserOptions": {
+    "warnOnUnsupportedTypeScriptVersion": false
+  },
   "rules": {
     // "react-hooks/exhaustive-deps": "off"
     //"only-ascii/only-ascii": "error"

client/packages/lowcoder/hocuspocus-server.js

@@ -0,0 +1,84 @@
+#!/usr/bin/env node
+
+/**
+ * Hocuspocus (Yjs WebSocket) Server for ChatBox v2
+ *
+ * Provides real-time shared state via Yjs documents served over WebSocket.
+ * Each application room maps to a Yjs document. Presence is handled through
+ * Hocuspocus awareness on the client side.
+ *
+ * Env vars:
+ *   PORT               - HTTP/WebSocket port (default 3006)
+ *   HOST               - Bind address (default 0.0.0.0)
+ *   HOCUSPOCUS_SECRET  - Optional shared secret for token auth
+ *
+ * Usage: node hocuspocus-server.js
+ */
+
+import { Server } from "@hocuspocus/server";
+
+const PORT = parseInt(process.env.PORT || "3006", 10);
+const HOST = process.env.HOST || "0.0.0.0";
+const SECRET = process.env.HOCUSPOCUS_SECRET || "";
+
+function writeJson(response, statusCode, payload) {
+  response.writeHead(statusCode, { "Content-Type": "application/json" });
+  response.end(JSON.stringify(payload));
+}
+
+const server = new Server({
+  name: "lowcoder-hocuspocus",
+  quiet: true,
+  address: HOST,
+  port: PORT,
+
+  async onListen() {
+    console.log(`[hocuspocus] listening on ws://${HOST}:${PORT}`);
+  },
+
+  async onRequest({ request, response }) {
+    if (request.url === "/health") {
+      writeJson(response, 200, {
+        status: "ok",
+        host: HOST,
+        port: PORT,
+        auth: SECRET ? "enabled" : "disabled",
+      });
+      return;
+    }
+
+    if (request.url === "/") {
+      writeJson(response, 200, {
+        name: "lowcoder-hocuspocus",
+        websocket: `ws://${HOST}:${PORT}`,
+        health: "/health",
+      });
+    }
+  },
+
+  async onAuthenticate({ token, documentName }) {
+    if (!SECRET) {
+      return;
+    }
+
+    if (token !== SECRET) {
+      console.warn(`[hocuspocus] rejected connection for ${documentName}: invalid token`);
+      throw new Error("Unauthorized");
+    }
+  },
+
+  async onConnect({ documentName, socketId }) {
+    console.log(`[hocuspocus] connect socket=${socketId} document=${documentName}`);
+  },
+
+  async onDisconnect({ documentName, socketId }) {
+    console.log(`[hocuspocus] disconnect socket=${socketId} document=${documentName}`);
+  },
+});
+
+try {
+  await server.listen();
+} catch (error) {
+  console.error("[hocuspocus] failed to start", error);
+  process.exit(1);
+}

client/packages/lowcoder/package.json

@@ -6,7 +6,12 @@
   "main": "src/index.sdk.ts",
   "types": "src/index.sdk.ts",
   "dependencies": {
+    "@ai-sdk/openai": "^1.3.22",
     "@ant-design/icons": "^5.3.0",
+    "@assistant-ui/react": "^0.10.24",
+    "@assistant-ui/react-ai-sdk": "^0.10.14",
+    "@assistant-ui/react-markdown": "^0.10.5",
+    "@assistant-ui/styles": "^0.1.13",
     "@bany/curl-to-json": "^1.2.8",
     "@codemirror/autocomplete": "^6.11.1",
     "@codemirror/commands": "^6.3.2",
@@ -25,9 +30,15 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "latest",
+    "@hocuspocus/provider": "^3.4.4",
+    "@hocuspocus/server": "^3.4.4",
     "@jsonforms/core": "^3.5.1",
     "@lottiefiles/dotlottie-react": "^0.13.0",
     "@manaflair/redux-batch": "^1.0.0",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@rjsf/antd": "^5.24.9",
     "@rjsf/core": "^5.24.9",
     "@rjsf/utils": "^5.24.9",
@@ -37,22 +48,27 @@
     "@types/react-signature-canvas": "^1.0.2",
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-virtualized": "^9.21.21",
+    "@y/websocket-server": "^0.1.1",
+    "ai": "^4.3.16",
     "alasql": "^4.6.6",
     "animate.css": "^4.1.1",
     "antd": "^5.25.2",
     "axios": "^1.7.7",
     "buffer": "^6.0.3",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.0.0",
     "cnchar": "^3.2.4",
     "coolshapes-react": "lowcoder-org/coolshapes-react",
     "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.25.2",
+    "cors": "^2.8.6",
     "dayjs": "^1.11.13",
     "dnd-kit-sortable-tree": "^0.1.73",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
     "echarts-wordcloud": "^2.1.0",
     "eslint4b-prebuilt-2": "^7.32.0",
+    "express": "^5.2.1",
     "file-saver": "^2.0.5",
     "github-markdown-css": "^5.1.0",
     "hotkeys-js": "^3.8.7",
@@ -62,6 +78,7 @@
     "loglevel": "^1.8.0",
     "lowcoder-core": "workspace:^",
     "lowcoder-design": "workspace:^",
+    "lucide-react": "^0.525.0",
     "mime": "^3.0.0",
     "moment": "^2.29.4",
     "numbro": "^2.3.6",
@@ -99,7 +116,7 @@
     "regenerator-runtime": "^0.13.9",
     "rehype-raw": "^6.1.1",
     "rehype-sanitize": "^5.0.1",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "simplebar-react": "^3.2.4",
     "sql-formatter": "^8.2.0",
@@ -111,7 +128,13 @@
     "ua-parser-js": "^1.0.33",
     "uuid": "^9.0.0",
     "web-vitals": "^2.1.0",
-    "xlsx": "^0.18.5"
+    "ws": "^8.18.3",
+    "xlsx": "^0.18.5",
+    "y-indexeddb": "^9.0.12",
+    "y-protocols": "^1.0.6",
+    "y-websocket": "^3.0.0",
+    "yjs": "^13.6.27",
+    "zod": "^3.25.76"
   },
   "scripts": {
     "supportedBrowsers": "yarn dlx browserslist-useragent-regexp --allowHigherVersions '>0.2%,not dead,not op_mini all,chrome >=69'",
@@ -137,7 +160,7 @@
     "http-proxy-middleware": "^2.0.6",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^5.9.2",
-    "typescript": "^4.8.4",
+    "typescript": "^5.6.2",
     "vite": "^4.5.5",
     "vite-plugin-checker": "^0.5.1",
     "vite-plugin-dynamic-import": "^1.5.0",

client/packages/lowcoder/src/app-env.d.ts

@@ -41,6 +41,8 @@ declare var REACT_APP_ENV: string;
 declare var REACT_APP_BUILD_ID: string;
 declare var REACT_APP_LOG_LEVEL: string;
 declare var REACT_APP_SERVER_IPS: string;
+declare var REACT_APP_HOCUSPOCUS_URL: string;
+declare var REACT_APP_HOCUSPOCUS_SECRET: string;
 declare var REACT_APP_BUNDLE_TYPE: "sdk" | "app";
 declare var REACT_APP_DISABLE_JS_SANDBOX: string;
 declare var REACT_APP_BUNDLE_BUILTIN_PLUGIN: string;

client/packages/lowcoder/src/base/codeEditor/completion/exposingCompletionSource.tsx

@@ -19,7 +19,7 @@ export class ExposingCompletionSource extends CompletionSource {
       return null;
     }
     const matchPath = context.matchBefore(
-      /(?:[A-Za-z_$][\w$]*(?:\[\s*(?:\d+|(["'])(?:[^\1\\]|\\.)*?\1)\s*\])*\.)*(?:[A-Za-z_$][\w$]*)?/
+      /(?:[A-Za-z_$][\w$]*(?:\[\s*(?:\d+|'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")\s*\])*\.)*(?:[A-Za-z_$][\w$]*)?/
     );
     if (!matchPath) {
       return null;

client/packages/lowcoder/src/components/ResCreatePanel.tsx

@@ -13,7 +13,7 @@ import { BottomResTypeEnum } from "types/bottomRes";
 import { LargeBottomResIconWrapper } from "util/bottomResUtils";
 import type { PageType } from "../constants/pageConstants";
 import type { SizeType } from "antd/es/config-provider/SizeContext";
-import { Datasource } from "constants/datasourceConstants";
+import { Datasource, QUICK_SSE_HTTP_API_ID } from "constants/datasourceConstants";
 import {
   QUICK_GRAPHQL_ID,
   QUICK_REST_API_ID,
@@ -172,13 +172,22 @@ const ResButton = (props: {
         compType: "streamApi",
       },
     },
+
     alasql: {
       label: trans("query.quickAlasql"),
       type: BottomResTypeEnum.Query,
       extra: {
         compType: "alasql",
       },
     },
+    sseHttpApi: { 
+      label: trans("query.quickSseHttpAPI"),
+      type: BottomResTypeEnum.Query,
+      extra: {
+        compType: "sseHttpApi",
+        dataSourceId: QUICK_SSE_HTTP_API_ID,
+      },
+    },
     graphql: {
       label: trans("query.quickGraphql"),
       type: BottomResTypeEnum.Query,
@@ -339,6 +348,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
               <DataSourceListWrapper $placement={placement}>
                 <ResButton size={buttonSize} identifier={"restApi"} onSelect={onSelect} />
                 <ResButton size={buttonSize} identifier={"streamApi"} onSelect={onSelect} />
+                <ResButton size={buttonSize} identifier={"sseHttpApi"} onSelect={onSelect} />
                 <ResButton size={buttonSize} identifier={"alasql"} onSelect={onSelect} />
                 <ResButton size={buttonSize} identifier={"graphql"} onSelect={onSelect} />
                 <DataSourceButton size={buttonSize} onClick={() => setCurlModalVisible(true)}>

client/packages/lowcoder/src/components/StepModal.tsx

@@ -25,7 +25,8 @@ export interface StepModalProps extends CustomModalProps {
 export default function StepModal(props: StepModalProps) {
   const { steps, activeStepKey, onStepChange, ...modalProps } = props;
   const [current, setCurrent] = useState(steps[0]?.key);
-  const currentStepIndex = steps.findIndex((i) => i.key === (activeStepKey ?? current));
+  const currentStepKey = activeStepKey ?? current;
+  const currentStepIndex = steps.findIndex((i) => i.key === currentStepKey);
   const currentStep = currentStepIndex >= 0 ? steps[currentStepIndex] : null;
 
   const handleChangeStep = (key: string) => {

client/packages/lowcoder/src/comps/comps/chatBoxComponent/ChatBoxContext.tsx

@@ -0,0 +1,84 @@
+import { createContext, useContext } from "react";
+import type { ChatRoom, OnlineUser, PendingRoomInvite } from "./store";
+import type {
+  ChatBoxContainerStyleType,
+  ChatBoxSidebarStyleType,
+  ChatBoxHeaderStyleType,
+  ChatBoxMessageStyleType,
+  ChatBoxInputStyleType,
+  AnimationStyleType,
+} from "comps/controls/styleControlConstants";
+
+type ChatEventName =
+  | "messageSent"
+  | "startTyping"
+  | "stopTyping"
+  | "roomSwitch"
+  | "roomLeave"
+  | "roomCreate"
+  | "inviteSend"
+  | "inviteAccept"
+  | "inviteDecline";
+
+interface ExposedState {
+  value: string;
+  onChange: (v: string) => void;
+}
+
+export interface ChatBoxContextValue {
+  // Data
+  messages: any[];
+  rooms: ChatRoom[];
+  currentRoomId: string;
+  currentRoom: ChatRoom | null;
+  currentUserId: string;
+  currentUserName: string;
+  typingUsers: any[];
+  onlineUsers: OnlineUser[];
+  pendingInvites: PendingRoomInvite[];
+  isAiThinking: boolean;
+
+  // Exposed state
+  chatTitle: ExposedState;
+  messageText: ExposedState;
+  lastSentMessageText: ExposedState;
+
+  // UI config
+  showHeader: boolean;
+  showRoomsPanel: boolean;
+  roomsPanelWidth: string;
+  allowRoomCreation: boolean;
+  allowRoomSearch: boolean;
+  style: ChatBoxContainerStyleType;
+  animationStyle: AnimationStyleType;
+  sidebarStyle: ChatBoxSidebarStyleType;
+  headerStyle: ChatBoxHeaderStyleType;
+  messageStyle: ChatBoxMessageStyleType;
+  inputStyle: ChatBoxInputStyleType;
+
+  // Events
+  onEvent: (event: ChatEventName) => any;
+
+  // Room actions
+  onRoomSwitch: (roomId: string) => void;
+  onRoomLeave: (roomId: string) => void;
+  onRoomCreate: (
+    name: string,
+    type: "public" | "private" | "llm",
+    description?: string,
+    llmQueryName?: string,
+  ) => void;
+  onInviteSend: (toUserId: string) => void;
+  onInviteAccept: (inviteId: string) => void;
+  onInviteDecline: (inviteId: string) => void;
+}
+
+export const ChatBoxContext = createContext<ChatBoxContextValue | null>(null);
+
+export function useChatBox(): ChatBoxContextValue {
+  const ctx = useContext(ChatBoxContext);
+  if (!ctx) {
+    throw new Error("useChatBox must be used within a ChatBoxProvider");
+  }
+  return ctx;
+}