Merge commit 'a8390532f7' as 'ai-context/workbench-ui'

ai-context/workbench-ui/src/pages/ChatPage.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { MessageSquareText } from "lucide-react";
+
+import ChatConversation from "../components/chat/ChatConversation";
+import PageHeader from "../components/common/PageHeader";
+
+const Chat = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<MessageSquareText />}
+        title="Assistant"
+        description="Converse with the knowledge-graph assistant in natural language"
+      />
+
+      <ChatConversation />
+    </>
+  );
+};
+
+export default Chat;

ai-context/workbench-ui/src/pages/EntityPage.tsx

@@ -0,0 +1,19 @@
+import { Waypoints } from "lucide-react";
+
+import PageHeader from "../components/common/PageHeader";
+import EntityDetail from "../components/entity/EntityDetail";
+
+const EntityPage = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<Waypoints />}
+        title="Explore"
+        description="Exploring properties and relationships of the knowledge graph"
+      />
+      <EntityDetail />
+    </>
+  );
+};
+
+export default EntityPage;

ai-context/workbench-ui/src/pages/FlowClassesPage.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+
+import { ScrollText } from "lucide-react";
+
+import PageHeader from "../components/common/PageHeader";
+import FlowClassTable from "../components/flow-classes/FlowClassTable";
+import { FlowClassEditorView } from "../components/flow-classes/FlowClassEditorView";
+
+type ViewMode = "table" | "editor";
+
+const FlowClassesPage = () => {
+  const [viewMode, setViewMode] = useState<ViewMode>("table");
+  const [editingFlowClassId, setEditingFlowClassId] = useState<string | null>(
+    null,
+  );
+
+  const handleEditFlowClass = (flowClassId: string) => {
+    setEditingFlowClassId(flowClassId);
+    setViewMode("editor");
+  };
+
+  const handleBackToTable = () => {
+    setViewMode("table");
+    setEditingFlowClassId(null);
+  };
+
+  if (viewMode === "editor" && editingFlowClassId) {
+    return (
+      <FlowClassEditorView
+        flowClassId={editingFlowClassId}
+        onBack={handleBackToTable}
+      />
+    );
+  }
+
+  return (
+    <>
+      <PageHeader
+        icon={<ScrollText />}
+        title="Flow Classes"
+        description="Managing the dataflow definitions"
+      />
+      <FlowClassTable onEdit={handleEditFlowClass} />
+    </>
+  );
+};
+
+export default FlowClassesPage;

ai-context/workbench-ui/src/pages/FlowsPage.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Workflow } from "lucide-react";
+
+import PageHeader from "../components/common/PageHeader";
+import Flows from "../components/flows/Flows";
+
+const FlowsPage = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<Workflow />}
+        title="Processing Flows"
+        description="Managing the data flows in the system"
+      />
+      <Flows />
+    </>
+  );
+};
+
+export default FlowsPage;

ai-context/workbench-ui/src/pages/GraphPage.tsx

@@ -0,0 +1,19 @@
+import { Rotate3d } from "lucide-react";
+
+import PageHeader from "../components/common/PageHeader";
+import Graph from "../components/graph/Graph";
+
+const GraphView = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<Rotate3d />}
+        title="Visualize"
+        description="Projects the knowledge graph into 3 dimensions"
+      />
+      <Graph />
+    </>
+  );
+};
+
+export default GraphView;

ai-context/workbench-ui/src/pages/KnowledgeCoresPage.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { BrainCircuit } from "lucide-react";
+
+import PageHeader from "../components/common/PageHeader";
+import KnowledgeCores from "../components/kc/KnowledgeCores";
+
+const KnowledgeCoresPage = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<BrainCircuit />}
+        title="Knowledge Cores"
+        description="Knowledge cores are modules which encapsulate a set of domain knowledge"
+      />
+      <KnowledgeCores />
+    </>
+  );
+};
+
+export default KnowledgeCoresPage;

ai-context/workbench-ui/src/pages/LLMModelsPage.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Bot } from "lucide-react";
+import PageHeader from "../components/common/PageHeader";
+import LLMModels from "../components/llm-models/LLMModels";
+
+const LLMModelsPage: React.FC = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<Bot />}
+        title="LLM Models"
+        description="Manage available LLM model options and set the default model"
+      />
+      <LLMModels />
+    </>
+  );
+};
+
+export default LLMModelsPage;

ai-context/workbench-ui/src/pages/LibraryPage.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { LibraryBig } from "lucide-react";
+import { Tabs } from "@chakra-ui/react";
+
+import PageHeader from "../components/common/PageHeader";
+import Documents from "../components/library/Documents";
+import Collections from "../components/library/Collections";
+
+const LibraryPage = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<LibraryBig />}
+        title="Library"
+        description="Managing documents and collections"
+      />
+      <Tabs.Root defaultValue="documents">
+        <Tabs.List>
+          <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
+          <Tabs.Trigger value="collections">Collections</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="documents">
+          <Documents />
+        </Tabs.Content>
+        <Tabs.Content value="collections">
+          <Collections />
+        </Tabs.Content>
+      </Tabs.Root>
+    </>
+  );
+};
+
+export default LibraryPage;

ai-context/workbench-ui/src/pages/LoadPage.tsx

@@ -0,0 +1,154 @@
+import React from "react";
+import { FileUp } from "lucide-react";
+
+import { SimpleGrid, Stack, Box } from "@chakra-ui/react";
+
+import { useSocket } from "@trustgraph/react-provider";
+
+import Title from "../components/load/Title";
+import Comments from "../components/load/Comments";
+import Url from "../components/load/Url";
+import Keywords from "../components/load/Keywords";
+import Operation from "../components/load/Operation";
+import Content from "../components/load/Content";
+import { useProgressStateStore } from "@trustgraph/react-state";
+import { useLoadStateStore } from "@trustgraph/react-state";
+import PageHeader from "../components/common/PageHeader";
+import { loadFile, loadText } from "../utils/document-load";
+import { toaster } from "../components/ui/toaster";
+
+const Load = () => {
+  const title = useLoadStateStore((state) => state.title);
+  const comments = useLoadStateStore((state) => state.comments);
+  const url = useLoadStateStore((state) => state.url);
+  const keywords = useLoadStateStore((state) => state.keywords);
+  const operation = useLoadStateStore((state) => state.operation);
+  const files = useLoadStateStore((state) => state.files);
+  const text = useLoadStateStore((state) => state.text);
+  const setText = useLoadStateStore((state) => state.setText);
+  const addUploaded = useLoadStateStore((state) => state.addUploaded);
+  const removeFile = useLoadStateStore((state) => state.removeFile);
+  const incTextUploads = useLoadStateStore((state) => state.incTextUploads);
+
+  const addActivity = useProgressStateStore((state) => state.addActivity);
+  const removeActivity = useProgressStateStore(
+    (state) => state.removeActivity,
+  );
+
+  const socket = useSocket();
+
+  const onFilesSubmit = () => {
+    const filesToLoad = [...files];
+
+    // Shouldn't happen, make it a noop
+    if (filesToLoad.length == 0) return;
+
+    loadOneFile(filesToLoad)
+      .then(() => {
+        console.log("Success");
+        toaster.create({
+          title: "Files uploaded",
+          type: "success",
+        });
+      })
+      .catch((e) =>
+        toaster.create({
+          title: "Error: " + e.toString(),
+          type: "error",
+        }),
+      );
+  };
+
+  const loadOneFile = (files) => {
+    const kind = operation == "upload-pdf" ? "application/pdf" : "text/plain";
+
+    const act = "Uploading: " + files[0].name;
+    addActivity(act);
+
+    // Create a promise for the first file in the list
+    const prom = loadFile(files[0], kind, {
+      title: title,
+      url: url,
+      keywords: keywords,
+      comments: comments,
+      socket: socket,
+    })
+      .then(() => {
+        toaster.create({
+          title: files[0].name + " uploaded",
+          type: "info",
+        });
+
+        // Add file to 'uploaded' list
+        addUploaded(files[0].name);
+        removeFile(files[0]);
+
+        removeActivity(act);
+      })
+      .catch((e) => {
+        removeActivity(act);
+        throw e;
+      });
+
+    if (files.length < 2) {
+      return prom;
+    } else {
+      return prom.then(() => loadOneFile(files.slice(1)));
+    }
+  };
+
+  const onTextSubmit = () => {
+    loadText(text, {
+      title: title,
+      url: url,
+      keywords: keywords,
+      comments: comments,
+      addActivity: addActivity,
+      removeActivity: removeActivity,
+      onSuccess: () => handleTextSuccess(),
+      socket: socket,
+    })
+      .then(() => {
+        setText("");
+        incTextUploads();
+        toaster.create({
+          title: "Text uploaded",
+          type: "success",
+        });
+      })
+      .catch((e) =>
+        toaster.create({
+          title: "Error: " + e.toString(),
+          type: "error",
+        }),
+      );
+  };
+
+  return (
+    <>
+      <PageHeader
+        icon={<FileUp />}
+        title="Document load"
+        description="Load documents into TrustGraph processing"
+      />
+
+      <SimpleGrid minChildWidth="sm" gap={8}>
+        <Stack>
+          <Title />
+          <Url />
+          <Keywords />
+        </Stack>
+        <Box>
+          <Comments />
+          <Operation />
+        </Box>
+      </SimpleGrid>
+      <Content
+        submitFiles={() => onFilesSubmit()}
+        submitText={() => onTextSubmit()}
+      />
+    </>
+  );
+};
+
+export default Load;

ai-context/workbench-ui/src/pages/McpToolsPage.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Plug } from "lucide-react";
+
+import PageHeader from "../components/common/PageHeader";
+import McpTools from "../components/mcp-tools/McpTools";
+
+const McpToolsPage = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<Plug />}
+        title="MCP Tools Configuration"
+        description="Makes MCP tools available for agent integration"
+      />
+      <McpTools />
+    </>
+  );
+};
+
+export default McpToolsPage;

ai-context/workbench-ui/src/pages/OntologiesPage.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Tags } from "lucide-react";
+import PageHeader from "../components/common/PageHeader";
+import { Ontologies } from "../components/ontologies/Ontologies";
+
+const OntologiesPage: React.FC = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<Tags />}
+        title="Ontology Management"
+        description="Create and manage ontologies for knowledge management"
+      />
+      <Ontologies />
+    </>
+  );
+};
+
+export default OntologiesPage;

ai-context/workbench-ui/src/pages/ProcessingPage.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { CircleArrowRight } from "lucide-react";
+
+import PageHeader from "../components/common/PageHeader";
+import Processing from "../components/processing/Processing";
+
+const ProcessingPage = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<CircleArrowRight />}
+        title="Processing"
+        description="Submit documents for processing"
+      />
+      <Processing />
+    </>
+  );
+};
+
+export default ProcessingPage;

ai-context/workbench-ui/src/pages/PromptsPage.tsx

@@ -0,0 +1,19 @@
+import { MessageCircleCode } from "lucide-react";
+
+import PageHeader from "../components/common/PageHeader";
+import Prompts from "../components/prompts/Prompts";
+
+const PromptsPage = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<MessageCircleCode />}
+        title="Prompt Management"
+        description="Define prompts which control AI interactions"
+      />
+      <Prompts />
+    </>
+  );
+};
+
+export default PromptsPage;

ai-context/workbench-ui/src/pages/SchemasPage.tsx

@@ -0,0 +1,18 @@
+import { Database } from "lucide-react";
+import PageHeader from "../components/common/PageHeader";
+import { Schemas } from "../components/schemas/Schemas";
+
+const SchemasPage = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<Database />}
+        title="Schema Management"
+        description="Define and manage data schemas for your knowledge graph"
+      />
+      <Schemas />
+    </>
+  );
+};
+
+export default SchemasPage;

ai-context/workbench-ui/src/pages/SearchPage.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { Search as SearchIcon } from "lucide-react";
+
+import Search from "../components/search/Search";
+import PageHeader from "../components/common/PageHeader";
+
+const SearchPage = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<SearchIcon />}
+        title="Document search"
+        description="Semantic matching against entities in the knowledge graph"
+      />
+      <Search />
+    </>
+  );
+};
+
+export default SearchPage;

ai-context/workbench-ui/src/pages/SettingsPage.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Settings } from "lucide-react";
+import PageHeader from "../components/common/PageHeader";
+import SettingsComponent from "../components/settings/Settings";
+
+const SettingsPage: React.FC = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<Settings />}
+        title="Settings"
+        description="Configure application preferences and system settings"
+      />
+      <SettingsComponent />
+    </>
+  );
+};
+
+export default SettingsPage;

ai-context/workbench-ui/src/pages/StructuredQueryPage.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { FileSearch, Search, Code, Play } from "lucide-react";
+import PageHeader from "../components/common/PageHeader";
+import { Box } from "@chakra-ui/react";
+import { Tabs } from "@chakra-ui/react";
+import GenerateGraphQLTab from "../components/structured-query/GenerateGraphQLTab";
+import RunGraphQLTab from "../components/structured-query/RunGraphQLTab";
+import StructuredQueryTab from "../components/structured-query/StructuredQueryTab";
+
+const StructuredQueryPage: React.FC = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<FileSearch />}
+        title="Structured Query"
+        description="Build and execute structured queries to explore your data"
+      />
+      <Box p={6}>
+        <Tabs.Root defaultValue="structured-query" variant="enclosed">
+          <Tabs.List>
+            <Tabs.Trigger value="structured-query">
+              <Search size={16} />
+              Structured Query
+            </Tabs.Trigger>
+            <Tabs.Trigger value="generate-graphql">
+              <Code size={16} />
+              Generate GraphQL
+            </Tabs.Trigger>
+            <Tabs.Trigger value="run-graphql">
+              <Play size={16} />
+              Run GraphQL
+            </Tabs.Trigger>
+          </Tabs.List>
+
+          <Tabs.Content value="structured-query">
+            <StructuredQueryTab />
+          </Tabs.Content>
+
+          <Tabs.Content value="generate-graphql">
+            <GenerateGraphQLTab />
+          </Tabs.Content>
+
+          <Tabs.Content value="run-graphql">
+            <RunGraphQLTab />
+          </Tabs.Content>
+        </Tabs.Root>
+      </Box>
+    </>
+  );
+};
+
+export default StructuredQueryPage;

ai-context/workbench-ui/src/pages/TokenCostPage.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { HandCoins } from "lucide-react";
+
+import PageHeader from "../components/common/PageHeader";
+import TokenCosts from "../components/token-cost/TokenCosts";
+
+const TokenCostPage = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<HandCoins />}
+        title="Token Cost Configuration"
+        description="Define the cost of AI token processing"
+      />
+      <TokenCosts />
+    </>
+  );
+};
+
+export default TokenCostPage;

ai-context/workbench-ui/src/pages/ToolsPage.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Hammer } from "lucide-react";
+
+import PageHeader from "../components/common/PageHeader";
+import Tools from "../components/agents/Tools";
+
+const ToolsPage = () => {
+  return (
+    <>
+      <PageHeader
+        icon={<Hammer />}
+        title="Agent Tools Configuration"
+        description="Agent tools equip the agent framework to work with your data"
+      />
+      <Tools />
+    </>
+  );
+};
+
+export default ToolsPage;