Integrating ai in project and flow

.env.local

@@ -2,9 +2,10 @@ EDITION=ce
 NEXT_PUBLIC_EDITION=ce
 
 SAGITTARIUS_GRAPHQL_URL=http://localhost:80/graphql
+SAGITTARIUS_CABLE_URL=http://localhost:80/cable
 
 NEXT_PUBLIC_SCULPTOR_VERSION=0.0.0
-NEXT_PUBLIC_PICTOR_VERSION=0.10.3
+NEXT_PUBLIC_PICTOR_VERSION=0.10.4
 NEXT_PUBLIC_ALLOWED_REDIRECT_DOMAINS=*.code0.tech,*.codezero.build
 
 NEXT_PUBLIC_OTEL_SERVICE_NAME=#"sculptor-client"

next.config.ts

@@ -3,6 +3,7 @@ import path from "node:path";
 
 const EDITION = process.env.EDITION ?? "ce";
 const SAGITTARIUS_GRAPHQL_URL = process.env.SAGITTARIUS_GRAPHQL_URL ?? 'http://localhost:3010/graphql';
+const SAGITTARIUS_CABLE_URL = process.env.SAGITTARIUS_CABLE_URL ?? 'http://localhost:3010/cable';
 
 const cspHeader = `
     default-src 'self';
@@ -15,7 +16,7 @@ const cspHeader = `
     form-action 'self';
     frame-ancestors 'none';
     worker-src 'self' blob: data: *;
-    connect-src 'self' ${SAGITTARIUS_GRAPHQL_URL} ${process.env.NEXT_PUBLIC_OTEL_LOGS_ENDPOINT} ${process.env.NEXT_PUBLIC_OTEL_TRACES_ENDPOINT};
+    connect-src 'self' ${SAGITTARIUS_GRAPHQL_URL} ${SAGITTARIUS_CABLE_URL.replace("http", "ws")} ${process.env.NEXT_PUBLIC_OTEL_LOGS_ENDPOINT} ${process.env.NEXT_PUBLIC_OTEL_TRACES_ENDPOINT};
 `
 
 const nextConfig: NextConfig = {
@@ -55,6 +56,10 @@ const nextConfig: NextConfig = {
             {
                 source: '/graphql',
                 destination: SAGITTARIUS_GRAPHQL_URL // Proxy to Backend
+            },
+            {
+                source: '/cable',
+                destination: SAGITTARIUS_CABLE_URL // Proxy to Backend
             }
         ];
     }

package.json

@@ -15,10 +15,11 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.9",
-    "@code0-tech/pictor": "^0.10.3",
-    "@code0-tech/triangulum": "^0.22.0",
+    "@code0-tech/pictor": "^0.10.4",
+    "@code0-tech/triangulum": "^0.25.0",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lint": "^6.9.5",
+    "@icons-pack/react-simple-icons": "^13.13.0",
     "@opentelemetry/api": "^1.9.1",
     "@opentelemetry/context-zone": "^2.6.1",
     "@opentelemetry/exporter-logs-otlp-http": "^0.218.0",
@@ -27,11 +28,14 @@
     "@opentelemetry/instrumentation-fetch": "^0.218.0",
     "@opentelemetry/instrumentation-xml-http-request": "^0.218.0",
     "@opentelemetry/sdk-trace-web": "^2.6.1",
+    "@rails/actioncable": "^8.1.300",
+    "@types/rails__actioncable": "^8.0.3",
     "@uidotdev/usehooks": "^2.4.1",
     "@vercel/otel": "^2.1.1",
     "@xyflow/react": "^12.11.0",
     "date-fns": "^4.1.0",
     "graphql": "^16.12.0",
+    "graphql-ruby-client": "^1.15.1",
     "graphql-tag": "^2.12.6",
     "ldrs": "^1.1.9",
     "lodash": "^4.18.1",

src/app/(flow)/layout.tsx

@@ -33,6 +33,7 @@ import {RoleView} from "@edition/role/services/Role.view";
 import {useUserSession} from "@edition/user/hooks/User.session.hook";
 import {Layout} from "@code0-tech/pictor/dist/components/layout/Layout";
 import {ModuleService} from "@edition/module/services/Module.service";
+import {AIService, Model} from "@edition/ai/services/AI.service";
 
 export default function FlowLayout({bar, tab, children}: {
     bar: React.ReactNode,
@@ -67,7 +68,7 @@ export default function FlowLayout({bar, tab, children}: {
     const datatype = usePersistentReactiveArrayService<DataType, DatatypeService>(`dashboard::datatypes::${currentSession?.id}`, (store) => new DatatypeService(graphqlClient, store))
     const flowtype = usePersistentReactiveArrayService<FlowType, FlowTypeService>(`dashboard::flowtypes::${currentSession?.id}`, (store) => new FlowTypeService(graphqlClient, store))
     const module = usePersistentReactiveArrayService<RuntimeModule, ModuleService>(`dashboard::modules::${currentSession?.id}`, (store) => new ModuleService(graphqlClient, store))
-
+    const ai = usePersistentReactiveArrayService<Model, AIService>(`dashboard::ai::${currentSession?.id}`, (store) => new AIService(graphqlClient, store))
 
     const runtimeId = React.useMemo(() => project[1].getById(projectId, {namespaceId})?.primaryRuntime?.id, [projectId, project[0], namespaceId])
 
@@ -82,7 +83,7 @@ export default function FlowLayout({bar, tab, children}: {
     }, [runtimeId, namespaceId, projectId, currentSession, flow, functions, datatype, flowtype])
 
     return <ContextStoreProvider
-        services={[user, organization, member, namespace, runtime, project, role, flow, functions, datatype, flowtype, module]}>
+        services={[user, organization, member, namespace, runtime, project, role, flow, functions, datatype, flowtype, module, ai]}>
         <Layout layoutGap={0} style={{zIndex: 0}} showLayoutSplitter={false} leftContent={
             <Flex p={0.7} pt={1} align={"center"} style={{flexDirection: "column", gap: "0.7rem"}}>
                 <div style={{