@agentica/chat 0.1.0

package/package.json

@@ -0,0 +1,93 @@
+{
+  "type": "module",
+  "name": "@agentica/chat",
+  "version": "0.1.0",
+  "main": "./lib/index.mjs",
+  "typings": "./lib/index.d.ts",
+  "description": "Frontend Application of Agentica",
+  "scripts": {
+    "build": "npm run build:static && npm run build:lib",
+    "build:static": "rimraf dist && tsc -b && vite build",
+    "build:lib": "rimraf lib && tsc --project tsconfig.lib.json --emitDeclarationOnly && rollup -c",
+    "dev": "vite",
+    "lint": "eslint .",
+    "prepare": "ts-patch install",
+    "preview": "vite preview",
+    "deploy": "node build/deploy.mjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wrtnlabs/agentica"
+  },
+  "keywords": [
+    "openapi",
+    "swagger",
+    "generator",
+    "typescript",
+    "editor",
+    "sdk",
+    "nestjs",
+    "nestia"
+  ],
+  "author": "Wrtn Technologies",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/wrtnlabs/agentica/issues"
+  },
+  "homepage": "https://wrtnlabs.io/agentica",
+  "dependencies": {
+    "@mui/icons-material": "^6.4.0",
+    "@mui/material": "^6.4.0",
+    "@samchon/openapi": "^3.0.0",
+    "@agentica/core": "workspace:^",
+    "html2canvas": "^1.4.1",
+    "js-file-download": "^0.4.12",
+    "openai": "^4.80.0",
+    "react-markdown": "^9.0.3",
+    "rehype-raw": "^7.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-mermaid-plugin": "^1.0.2",
+    "typia": "^8.0.0",
+    "uuid": "^11.0.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@ryoppippi/unplugin-typia": "^1.2.0",
+    "@samchon/shopping-api": "^0.16.0",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^22.10.5",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-json-editor-ajrm": "^2.5.6",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.13",
+    "gh-pages": "^6.3.0",
+    "globals": "^15.11.0",
+    "js-yaml": "^4.1.0",
+    "openai": "^4.82.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-json-editor-ajrm": "^2.5.14",
+    "react-mui-fileuploader": "^0.5.2",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.24.2",
+    "ts-patch": "^3.3.0",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.10.0",
+    "vite": "^5.4.9"
+  },
+  "files": [
+    "README.md",
+    "LICENSE",
+    "package.json",
+    "dist",
+    "lib",
+    "src",
+    "!src/examples"
+  ]
+}

package/src/AgenticaChatApplication.tsx

@@ -0,0 +1,15 @@
+import { Agentica } from "@agentica/core";
+import { ILlmSchema } from "@samchon/openapi";
+
+import { AgenticaChatMovie } from "./movies/AgenticaChatMovie";
+
+export const AgenticaChatApplication = <Model extends ILlmSchema.Model>({
+  agent,
+}: AgenticaChatApplication.IProps<Model>) => {
+  return <AgenticaChatMovie agent={agent} />;
+};
+export namespace AgenticaChatApplication {
+  export interface IProps<Model extends ILlmSchema.Model> {
+    agent: Agentica<Model>;
+  }
+}

package/src/components/MarkdownViewer.tsx

@@ -0,0 +1,32 @@
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeStringify from "rehype-stringify";
+import remarkMermaidPlugin from "remark-mermaid-plugin";
+
+export const MarkdownViewer = (props: MarkdownViewer.IProps) => {
+  return (
+    <Markdown
+      remarkPlugins={[remarkMermaidPlugin as any]}
+      rehypePlugins={[rehypeRaw, rehypeStringify]}
+      components={{
+        img: ({ ...props }) => (
+          <img
+            {...props}
+            style={{
+              display: "block",
+              maxWidth: "100%",
+              height: "auto",
+            }}
+          />
+        ),
+      }}
+    >
+      {props.children}
+    </Markdown>
+  );
+};
+export namespace MarkdownViewer {
+  export interface IProps {
+    children: string | null | undefined;
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./AgenticaChatApplication";

package/src/movies/AgenticaChatMovie.tsx

@@ -0,0 +1,330 @@
+import {
+  Agentica,
+  IAgenticaEvent,
+  IAgenticaOperationSelection,
+  IAgenticaPrompt,
+  IAgenticaTokenUsage,
+} from "@agentica/core";
+import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
+import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
+import SendIcon from "@mui/icons-material/Send";
+import {
+  AppBar,
+  Button,
+  Container,
+  Drawer,
+  IconButton,
+  Input,
+  Theme,
+  Toolbar,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import { ILlmSchema } from "@samchon/openapi";
+import html2canvas from "html2canvas";
+import fileDownload from "js-file-download";
+import React, { useEffect, useRef, useState } from "react";
+
+import { AgenticaChatMessageMovie } from "./messages/AgenticaChatMessageMovie";
+import { AgenticaChatSideMovie } from "./sides/AgenticaChatSideMovie";
+
+export const AgenticaChatMovie = <Model extends ILlmSchema.Model>({
+  agent,
+}: AgenticaChatMovie.IProps<Model>) => {
+  //----
+  // VARIABLES
+  //----
+  // REFERENCES
+  const upperDivRef = useRef<HTMLDivElement>(null);
+  const middleDivRef = useRef<HTMLDivElement>(null);
+  const bottomDivRef = useRef<HTMLDivElement>(null);
+  const bodyContainerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // STATES
+  const [error, setError] = useState<Error | null>(null);
+  const [text, setText] = useState("");
+  const [histories, setHistories] = useState<IAgenticaPrompt<Model>[]>(
+    agent.getPromptHistories().slice(),
+  );
+  const [tokenUsage, setTokenUsage] = useState<IAgenticaTokenUsage>(
+    JSON.parse(JSON.stringify(agent.getTokenUsage())),
+  );
+  const [height, setHeight] = useState(122);
+  const [enabled, setEnabled] = useState(true);
+  const [selections, setSelections] = useState<
+    IAgenticaOperationSelection<Model>[]
+  >([]);
+  const [openSide, setOpenSide] = useState(false);
+
+  //----
+  // EVENT INTERACTIONS
+  //----
+  // EVENT LISTENERS
+  const handleText = (evt: IAgenticaEvent.IText) => {
+    histories.push(evt);
+    setHistories(histories);
+  };
+  const handleDescribe = (evt: IAgenticaEvent.IDescribe<Model>) => {
+    histories.push(evt);
+    setHistories(histories);
+  };
+  const handleSelect = (evt: IAgenticaEvent.ISelect<Model>) => {
+    histories.push({
+      type: "select",
+      id: "something",
+      operations: [
+        {
+          ...evt.operation,
+          reason: evt.reason,
+          toJSON: () => ({}) as any,
+        } satisfies IAgenticaOperationSelection<Model>,
+      ],
+    });
+    setHistories(histories);
+
+    selections.push({
+      ...evt.operation,
+      reason: evt.reason,
+      toJSON: () => ({}) as any,
+    } satisfies IAgenticaOperationSelection<Model>);
+    setSelections(selections);
+  };
+
+  // INITIALIZATION
+  useEffect(() => {
+    if (inputRef.current !== null) inputRef.current.select();
+    agent.on("text", handleText);
+    agent.on("describe", handleDescribe);
+    agent.on("select", handleSelect);
+    setTokenUsage(agent.getTokenUsage());
+    return () => {
+      agent.off("text", handleText);
+      agent.off("describe", handleDescribe);
+      agent.off("select", handleSelect);
+    };
+  }, []);
+
+  // EVENT HANDLERS
+  const handleKeyUp = async (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter" && event.shiftKey === false) {
+      if (enabled === false) event.preventDefault();
+      else await conversate();
+    }
+  };
+
+  const handleResize = () => {
+    setTimeout(() => {
+      if (
+        upperDivRef.current === null ||
+        middleDivRef.current === null ||
+        bottomDivRef.current === null
+      )
+        return;
+      const newHeight: number =
+        upperDivRef.current.clientHeight + bottomDivRef.current.clientHeight;
+      if (newHeight !== height) setHeight(newHeight);
+    });
+  };
+
+  const conversate = async () => {
+    setText("");
+    setEnabled(false);
+    handleResize();
+    try {
+      await agent.conversate(text);
+    } catch (error) {
+      if (error instanceof Error) {
+        alert(error.message);
+        setError(error);
+      } else setError(new Error("Unknown error"));
+      return;
+    }
+
+    histories.splice(0, histories.length);
+    histories.push(...agent.getPromptHistories());
+    setHistories(histories);
+    setTokenUsage(agent.getTokenUsage());
+    setEnabled(true);
+
+    const selections: IAgenticaOperationSelection<Model>[] = agent
+      .getPromptHistories()
+      .filter((h) => h.type === "select")
+      .map((h) => h.operations)
+      .flat();
+    for (const cancel of agent
+      .getPromptHistories()
+      .filter((h) => h.type === "cancel")
+      .map((h) => h.operations)
+      .flat()) {
+      const index: number = selections.findIndex(
+        (s) =>
+          s.protocol === cancel.protocol &&
+          s.controller.name === cancel.controller.name &&
+          s.function.name === cancel.function.name,
+      );
+      if (index !== -1) selections.splice(index, 1);
+    }
+    setSelections(selections);
+  };
+
+  const capture = async () => {
+    if (bodyContainerRef.current === null) return;
+    const canvas: HTMLCanvasElement = await html2canvas(
+      bodyContainerRef.current,
+      {
+        scrollX: 0,
+        scrollY: 0,
+        width: bodyContainerRef.current.scrollWidth,
+        height: bodyContainerRef.current.scrollHeight,
+        useCORS: true,
+      },
+    );
+    canvas.toBlob((blob) => {
+      if (blob === null) return;
+      fileDownload(blob, "nestia-chat-screenshot.png");
+    });
+  };
+
+  //----
+  // RENDERERS
+  //----
+  const theme: Theme = useTheme();
+  const isMobile: boolean = useMediaQuery(theme.breakpoints.down("lg"));
+  const bodyMovie = (): JSX.Element => (
+    <Container
+      ref={bodyContainerRef}
+      maxWidth={false}
+      style={{
+        marginBottom: 15,
+        paddingBottom: 50,
+        width: isMobile ? "100%" : `calc(100% - ${SIDE_WIDTH}px)`,
+        height: "100%",
+        overflowY: "scroll",
+        backgroundColor: "lightblue",
+      }}
+    >
+      {histories
+        .map((prompt) => <AgenticaChatMessageMovie prompt={prompt} />)
+        .filter((elem) => elem !== null)}
+    </Container>
+  );
+  const sideMovie = (): JSX.Element => (
+    <div
+      style={{
+        width: isMobile ? undefined : SIDE_WIDTH,
+        height: "100%",
+        overflowY: "auto",
+        backgroundColor: "#eeeeee",
+      }}
+    >
+      <Container
+        maxWidth={false}
+        onClick={isMobile ? () => setOpenSide(false) : undefined}
+      >
+        <AgenticaChatSideMovie
+          vendor={agent.getVendor()}
+          config={agent.getConfig()}
+          usage={tokenUsage}
+          selections={selections}
+          error={error}
+        />
+      </Container>
+    </div>
+  );
+
+  return (
+    <div style={{ width: "100%", height: "100%" }}>
+      <AppBar ref={upperDivRef} position="relative" component="div">
+        <Toolbar>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            Agentica Chatbot
+          </Typography>
+          {isMobile ? (
+            <>
+              <IconButton onClick={capture}>
+                <AddAPhotoIcon />
+              </IconButton>
+              <IconButton onClick={() => setOpenSide(true)}>
+                <ReceiptLongIcon />
+              </IconButton>
+            </>
+          ) : (
+            <Button
+              color="inherit"
+              startIcon={<AddAPhotoIcon />}
+              onClick={capture}
+            >
+              Screenshot Capture
+            </Button>
+          )}
+        </Toolbar>
+      </AppBar>
+      <div
+        ref={middleDivRef}
+        style={{
+          width: "100%",
+          height: `calc(100% - ${height}px)`,
+          display: "flex",
+          flexDirection: "row",
+        }}
+      >
+        {isMobile ? (
+          <>
+            {bodyMovie()}
+            <Drawer
+              anchor="right"
+              open={openSide}
+              onClose={() => setOpenSide(false)}
+            >
+              {sideMovie()}
+            </Drawer>
+          </>
+        ) : (
+          <>
+            {bodyMovie()}
+            {sideMovie()}
+          </>
+        )}
+      </div>
+      <AppBar
+        ref={bottomDivRef}
+        position="static"
+        component="div"
+        color="inherit"
+      >
+        <Toolbar>
+          <Input
+            inputRef={inputRef}
+            fullWidth
+            placeholder="Conversate with AI Chatbot"
+            value={text}
+            multiline={true}
+            onKeyUp={handleKeyUp}
+            onChange={(e) => {
+              setText(e.target.value);
+              handleResize();
+            }}
+          />
+          <Button
+            variant="contained"
+            style={{ marginLeft: 10 }}
+            startIcon={<SendIcon />}
+            disabled={!enabled}
+            onClick={conversate}
+          >
+            Send
+          </Button>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+};
+export namespace AgenticaChatMovie {
+  export interface IProps<Model extends ILlmSchema.Model> {
+    agent: Agentica<Model>;
+  }
+}
+
+const SIDE_WIDTH = 450;

package/src/movies/messages/AgenticaChatDescribeMessageMovie.tsx

@@ -0,0 +1,62 @@
+import { IAgenticaPrompt } from "@agentica/core";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  Chip,
+  Collapse,
+} from "@mui/material";
+import { ILlmSchema } from "@samchon/openapi";
+import { useState } from "react";
+
+import { MarkdownViewer } from "../../components/MarkdownViewer";
+import { AgenticaChatExecuteMessageMovie } from "./AgenticaChatExecuteMessageMovie";
+
+export const AgenticaChatDescribeMessageMovie = <Model extends ILlmSchema.Model>({
+  prompt,
+}: AgenticaChatDescribeMessageMovie.IProps<Model>) => {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <Card
+      elevation={3}
+      style={{
+        marginTop: 15,
+        marginBottom: 15,
+        marginRight: "15%",
+      }}
+    >
+      <CardContent>
+        <Chip label="Function Describer" variant="outlined" color="secondary" />
+        <MarkdownViewer>{prompt.text}</MarkdownViewer>
+      </CardContent>
+      <CardActions style={{ textAlign: "right" }}>
+        <Button
+          startIcon={
+            <ExpandMoreIcon
+              style={{
+                transform: `rotate(${expanded ? 180 : 0}deg)`,
+              }}
+            />
+          }
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? "Hide Function Calls" : "Show Function Calls"}
+        </Button>
+      </CardActions>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CardContent>
+          {prompt.executions.map((execute) => (
+            <AgenticaChatExecuteMessageMovie execute={execute} />
+          ))}
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+};
+export namespace AgenticaChatDescribeMessageMovie {
+  export interface IProps<Model extends ILlmSchema.Model> {
+    prompt: IAgenticaPrompt.IDescribe<Model>;
+  }
+}

package/src/movies/messages/AgenticaChatExecuteMessageMovie.tsx

@@ -0,0 +1,43 @@
+import { IAgenticaPrompt } from "@agentica/core";
+import { Typography } from "@mui/material";
+import { ILlmSchema } from "@samchon/openapi";
+import React from "react";
+
+import { MarkdownViewer } from "../../components/MarkdownViewer";
+
+export const AgenticaChatExecuteMessageMovie = <Model extends ILlmSchema.Model>({
+  execute,
+}: AgenticaChatExecuteMessageMovie.IProps<Model>) => {
+  return (
+    <React.Fragment>
+      <Typography variant="h5"> {getTitle(execute)} </Typography>
+      <hr />
+      <Typography variant="h6"> Description </Typography>
+      <MarkdownViewer>{execute.function.description}</MarkdownViewer>
+      <br />
+      <Typography variant="h6"> Arguments </Typography>
+      <MarkdownViewer>
+        {["```json", JSON.stringify(execute.arguments, null, 2), "```"].join(
+          "\n",
+        )}
+      </MarkdownViewer>
+      <br />
+      <Typography variant="h6"> Return Value </Typography>
+      <MarkdownViewer>
+        {["```json", JSON.stringify(execute.value, null, 2), "```"].join("\n")}
+      </MarkdownViewer>
+    </React.Fragment>
+  );
+};
+export namespace AgenticaChatExecuteMessageMovie {
+  export interface IProps<Model extends ILlmSchema.Model> {
+    execute: IAgenticaPrompt.IExecute<Model>;
+  }
+}
+
+const getTitle = <Model extends ILlmSchema.Model>(
+  exec: IAgenticaPrompt.IExecute<Model>,
+) =>
+  exec.protocol === "http"
+    ? `${exec.function.method.toUpperCase()} ${exec.function.path}`
+    : exec.function.name;

package/src/movies/messages/AgenticaChatMessageMovie.tsx

@@ -0,0 +1,25 @@
+import { IAgenticaPrompt } from "@agentica/core";
+import { ILlmSchema } from "@samchon/openapi";
+
+import { AgenticaChatDescribeMessageMovie } from "./AgenticaChatDescribeMessageMovie";
+import { AgenticaChatSelectMessageMovie } from "./AgenticaChatSelectMessageMovie";
+import { AgenticaChatTextMessageMovie } from "./AgenticaChatTextMessageMovie";
+
+export const AgenticaChatMessageMovie = <Model extends ILlmSchema.Model>({
+  prompt,
+}: AgenticaChatMessageMovie.IProps<Model>) => {
+  if (prompt.type === "text")
+    return <AgenticaChatTextMessageMovie prompt={prompt} />;
+  else if (prompt.type === "select")
+    return prompt.operations.map((selection) => (
+      <AgenticaChatSelectMessageMovie selection={selection} />
+    ));
+  else if (prompt.type === "describe")
+    return <AgenticaChatDescribeMessageMovie prompt={prompt} />;
+  return null;
+};
+export namespace AgenticaChatMessageMovie {
+  export interface IProps<Model extends ILlmSchema.Model> {
+    prompt: IAgenticaPrompt<Model>;
+  }
+}

package/src/movies/messages/AgenticaChatSelectMessageMovie.tsx

@@ -0,0 +1,68 @@
+import { IAgenticaOperationSelection } from "@agentica/core";
+import GradingIcon from "@mui/icons-material/Grading";
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  Chip,
+  Collapse,
+} from "@mui/material";
+import { ILlmSchema } from "@samchon/openapi";
+import { useState } from "react";
+
+import { MarkdownViewer } from "../../components/MarkdownViewer";
+
+export const AgenticaChatSelectMessageMovie = <Model extends ILlmSchema.Model>({
+  selection,
+}: AgenticaChatSelectMessageMovie.IProps<Model>) => {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <Card
+      elevation={3}
+      style={{
+        marginTop: 15,
+        marginBottom: 15,
+        marginRight: "15%",
+      }}
+    >
+      <CardContent>
+        <Chip
+          icon={<GradingIcon />}
+          label="Function Selector"
+          variant="outlined"
+          color="warning"
+        />
+        <br />
+        <br />
+        Operation:
+        {selection.protocol === "http" ? (
+          <ul>
+            <li>{selection.function.method.toUpperCase()}</li>
+            <li>{selection.function.path}</li>
+          </ul>
+        ) : (
+          <ul>
+            <li>{selection.function.name}</li>
+          </ul>
+        )}
+        <MarkdownViewer>{selection.reason}</MarkdownViewer>
+      </CardContent>
+      <CardActions style={{ textAlign: "right" }}>
+        <Button onClick={() => setExpanded(!expanded)}>
+          {expanded ? "Hide Function Description" : "Show Function Description"}
+        </Button>
+      </CardActions>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CardContent>
+          <MarkdownViewer>{selection.function.description}</MarkdownViewer>
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+};
+export namespace AgenticaChatSelectMessageMovie {
+  export interface IProps<Model extends ILlmSchema.Model> {
+    selection: IAgenticaOperationSelection<Model>;
+  }
+}