@agentica/chat 0.10.3 → 0.11.0

package/src/movies/AgenticaChatMovie.tsx

@@ -1,9 +1,11 @@
 import {
   Agentica,
-  IAgenticaEvent,
-  IAgenticaOperationSelection,
-  IAgenticaPrompt,
-  IAgenticaTokenUsage,
+  AgenticaDescribeEvent,
+  AgenticaOperationSelection,
+  AgenticaPrompt,
+  AgenticaSelectEvent,
+  AgenticaTextEvent,
+  AgenticaTokenUsage,
 } from "@agentica/core";
 import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
 import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
@@ -22,8 +24,7 @@ import {
   useTheme,
 } from "@mui/material";
 import { ILlmSchema } from "@samchon/openapi";
-import html2canvas from "html2canvas";
-import fileDownload from "js-file-download";
+import { toPng } from "html-to-image";
 import React, { useEffect, useRef, useState } from "react";
 
 import { AgenticaChatMessageMovie } from "./messages/AgenticaChatMessageMovie";
@@ -31,6 +32,7 @@ import { AgenticaChatSideMovie } from "./sides/AgenticaChatSideMovie";
 
 export const AgenticaChatMovie = <Model extends ILlmSchema.Model>({
   agent,
+  title,
 }: AgenticaChatMovie.IProps<Model>) => {
   //----
   // VARIABLES
@@ -45,16 +47,16 @@ export const AgenticaChatMovie = <Model extends ILlmSchema.Model>({
   // STATES
   const [error, setError] = useState<Error | null>(null);
   const [text, setText] = useState("");
-  const [histories, setHistories] = useState<IAgenticaPrompt<Model>[]>(
+  const [histories, setHistories] = useState<AgenticaPrompt<Model>[]>(
     agent.getPromptHistories().slice(),
   );
-  const [tokenUsage, setTokenUsage] = useState<IAgenticaTokenUsage>(
+  const [tokenUsage, setTokenUsage] = useState<AgenticaTokenUsage>(
     JSON.parse(JSON.stringify(agent.getTokenUsage())),
   );
   const [height, setHeight] = useState(122);
   const [enabled, setEnabled] = useState(true);
   const [selections, setSelections] = useState<
-    IAgenticaOperationSelection<Model>[]
+    AgenticaOperationSelection<Model>[]
   >([]);
   const [openSide, setOpenSide] = useState(false);
 
@@ -62,33 +64,21 @@ export const AgenticaChatMovie = <Model extends ILlmSchema.Model>({
   // EVENT INTERACTIONS
   //----
   // EVENT LISTENERS
-  const handleText = (evt: IAgenticaEvent.IText) => {
-    histories.push(evt);
+  const handleText = async (event: AgenticaTextEvent) => {
+    await event.join(); // @todo Jaxtyn: streaming
+    histories.push(event.toPrompt());
     setHistories(histories);
   };
-  const handleDescribe = (evt: IAgenticaEvent.IDescribe<Model>) => {
-    histories.push(evt);
+  const handleDescribe = async (event: AgenticaDescribeEvent<Model>) => {
+    await event.join(); // @todo Jaxtyn: streaming
+    histories.push(event.toPrompt());
     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>,
-      ],
-    });
+  const handleSelect = (evevnt: AgenticaSelectEvent<Model>) => {
+    histories.push(evevnt.toPrompt());
     setHistories(histories);
 
-    selections.push({
-      ...evt.operation,
-      reason: evt.reason,
-      toJSON: () => ({}) as any,
-    } satisfies IAgenticaOperationSelection<Model>);
+    selections.push(evevnt.selection);
     setSelections(selections);
   };
 
@@ -148,21 +138,21 @@ export const AgenticaChatMovie = <Model extends ILlmSchema.Model>({
     setTokenUsage(agent.getTokenUsage());
     setEnabled(true);
 
-    const selections: IAgenticaOperationSelection<Model>[] = agent
+    const selections: AgenticaOperationSelection<Model>[] = agent
       .getPromptHistories()
       .filter((h) => h.type === "select")
-      .map((h) => h.operations)
+      .map((h) => h.selections)
       .flat();
     for (const cancel of agent
       .getPromptHistories()
       .filter((h) => h.type === "cancel")
-      .map((h) => h.operations)
+      .map((h) => h.selections)
       .flat()) {
       const index: number = selections.findIndex(
         (s) =>
-          s.protocol === cancel.protocol &&
-          s.controller.name === cancel.controller.name &&
-          s.function.name === cancel.function.name,
+          s.operation.protocol === cancel.operation.protocol &&
+          s.operation.controller.name === cancel.operation.controller.name &&
+          s.operation.function.name === cancel.operation.function.name,
       );
       if (index !== -1) selections.splice(index, 1);
     }
@@ -171,20 +161,13 @@ export const AgenticaChatMovie = <Model extends ILlmSchema.Model>({
 
   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");
-    });
+
+    const dataUrl = await toPng(bodyContainerRef.current, {});
+    const link = document.createElement("a");
+    link.download = "nestia-chat-screenshot.png";
+    link.href = dataUrl;
+    link.click();
+    link.remove();
   };
 
   //----
@@ -193,22 +176,30 @@ export const AgenticaChatMovie = <Model extends ILlmSchema.Model>({
   const theme: Theme = useTheme();
   const isMobile: boolean = useMediaQuery(theme.breakpoints.down("lg"));
   const bodyMovie = (): JSX.Element => (
-    <Container
-      ref={bodyContainerRef}
-      maxWidth={false}
+    <div
       style={{
-        marginBottom: 15,
-        paddingBottom: 50,
-        width: isMobile ? "100%" : `calc(100% - ${SIDE_WIDTH}px)`,
+        overflowY: "auto",
         height: "100%",
-        overflowY: "scroll",
+        width: isMobile ? "100%" : `calc(100% - ${SIDE_WIDTH}px)`,
+        margin: 0,
         backgroundColor: "lightblue",
       }}
     >
-      {histories
-        .map((prompt) => <AgenticaChatMessageMovie prompt={prompt} />)
-        .filter((elem) => elem !== null)}
-    </Container>
+      <Container
+        style={{
+          paddingBottom: 50,
+          width: "100%",
+          minHeight: "100%",
+          backgroundColor: "lightblue",
+          margin: 0,
+        }}
+        ref={bodyContainerRef}
+      >
+        {histories
+          .map((prompt) => <AgenticaChatMessageMovie prompt={prompt} />)
+          .filter((elem) => elem !== null)}
+      </Container>
+    </div>
   );
   const sideMovie = (): JSX.Element => (
     <div
@@ -239,7 +230,7 @@ export const AgenticaChatMovie = <Model extends ILlmSchema.Model>({
       <AppBar ref={upperDivRef} position="relative" component="div">
         <Toolbar>
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            Agentica Chatbot
+            {title ?? "Agentica Chatbot"}
           </Typography>
           {isMobile ? (
             <>
@@ -324,6 +315,7 @@ export const AgenticaChatMovie = <Model extends ILlmSchema.Model>({
 export namespace AgenticaChatMovie {
   export interface IProps<Model extends ILlmSchema.Model> {
     agent: Agentica<Model>;
+    title?: string;
   }
 }
 

package/src/movies/messages/AgenticaChatDescribeMessageMovie.tsx

@@ -1,4 +1,4 @@
-import { IAgenticaPrompt } from "@agentica/core";
+import { AgenticaDescribePrompt } from "@agentica/core";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import {
   Button,
@@ -14,7 +14,9 @@ import { useState } from "react";
 import { MarkdownViewer } from "../../components/MarkdownViewer";
 import { AgenticaChatExecuteMessageMovie } from "./AgenticaChatExecuteMessageMovie";
 
-export const AgenticaChatDescribeMessageMovie = <Model extends ILlmSchema.Model>({
+export const AgenticaChatDescribeMessageMovie = <
+  Model extends ILlmSchema.Model,
+>({
   prompt,
 }: AgenticaChatDescribeMessageMovie.IProps<Model>) => {
   const [expanded, setExpanded] = useState(false);
@@ -47,7 +49,7 @@ export const AgenticaChatDescribeMessageMovie = <Model extends ILlmSchema.Model>
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          {prompt.executions.map((execute) => (
+          {prompt.executes.map((execute) => (
             <AgenticaChatExecuteMessageMovie execute={execute} />
           ))}
         </CardContent>
@@ -57,6 +59,6 @@ export const AgenticaChatDescribeMessageMovie = <Model extends ILlmSchema.Model>
 };
 export namespace AgenticaChatDescribeMessageMovie {
   export interface IProps<Model extends ILlmSchema.Model> {
-    prompt: IAgenticaPrompt.IDescribe<Model>;
+    prompt: AgenticaDescribePrompt<Model>;
   }
 }

package/src/movies/messages/AgenticaChatExecuteMessageMovie.tsx

@@ -1,11 +1,13 @@
-import { IAgenticaPrompt } from "@agentica/core";
+import { AgenticaExecutePrompt } 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>({
+export const AgenticaChatExecuteMessageMovie = <
+  Model extends ILlmSchema.Model,
+>({
   execute,
 }: AgenticaChatExecuteMessageMovie.IProps<Model>) => {
   return (
@@ -13,7 +15,7 @@ export const AgenticaChatExecuteMessageMovie = <Model extends ILlmSchema.Model>(
       <Typography variant="h5"> {getTitle(execute)} </Typography>
       <hr />
       <Typography variant="h6"> Description </Typography>
-      <MarkdownViewer>{execute.function.description}</MarkdownViewer>
+      <MarkdownViewer>{execute.operation.function.description}</MarkdownViewer>
       <br />
       <Typography variant="h6"> Arguments </Typography>
       <MarkdownViewer>
@@ -31,13 +33,13 @@ export const AgenticaChatExecuteMessageMovie = <Model extends ILlmSchema.Model>(
 };
 export namespace AgenticaChatExecuteMessageMovie {
   export interface IProps<Model extends ILlmSchema.Model> {
-    execute: IAgenticaPrompt.IExecute<Model>;
+    execute: AgenticaExecutePrompt<Model>;
   }
 }
 
 const getTitle = <Model extends ILlmSchema.Model>(
-  exec: IAgenticaPrompt.IExecute<Model>,
+  exec: AgenticaExecutePrompt<Model>,
 ) =>
-  exec.protocol === "http"
-    ? `${exec.function.method.toUpperCase()} ${exec.function.path}`
-    : exec.function.name;
+  exec.operation.protocol === "http"
+    ? `${exec.operation.function.method.toUpperCase()} ${exec.operation.function.path}`
+    : exec.operation.function.name;

package/src/movies/messages/AgenticaChatMessageMovie.tsx

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

package/src/movies/messages/AgenticaChatSelectMessageMovie.tsx

@@ -1,4 +1,4 @@
-import { IAgenticaOperationSelection } from "@agentica/core";
+import { AgenticaOperationSelection } from "@agentica/core";
 import GradingIcon from "@mui/icons-material/Grading";
 import {
   Button,
@@ -36,14 +36,14 @@ export const AgenticaChatSelectMessageMovie = <Model extends ILlmSchema.Model>({
         <br />
         <br />
         Operation:
-        {selection.protocol === "http" ? (
+        {selection.operation.protocol === "http" ? (
           <ul>
-            <li>{selection.function.method.toUpperCase()}</li>
-            <li>{selection.function.path}</li>
+            <li>{selection.operation.function.method.toUpperCase()}</li>
+            <li>{selection.operation.function.path}</li>
           </ul>
         ) : (
           <ul>
-            <li>{selection.function.name}</li>
+            <li>{selection.operation.function.name}</li>
           </ul>
         )}
         <MarkdownViewer>{selection.reason}</MarkdownViewer>
@@ -55,7 +55,9 @@ export const AgenticaChatSelectMessageMovie = <Model extends ILlmSchema.Model>({
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <MarkdownViewer>{selection.function.description}</MarkdownViewer>
+          <MarkdownViewer>
+            {selection.operation.function.description}
+          </MarkdownViewer>
         </CardContent>
       </Collapse>
     </Card>
@@ -63,6 +65,6 @@ export const AgenticaChatSelectMessageMovie = <Model extends ILlmSchema.Model>({
 };
 export namespace AgenticaChatSelectMessageMovie {
   export interface IProps<Model extends ILlmSchema.Model> {
-    selection: IAgenticaOperationSelection<Model>;
+    selection: AgenticaOperationSelection<Model>;
   }
 }

package/src/movies/messages/AgenticaChatTextMessageMovie.tsx

@@ -1,4 +1,4 @@
-import { IAgenticaPrompt } from "@agentica/core";
+import { AgenticaTextPrompt } from "@agentica/core";
 import FaceIcon from "@mui/icons-material/Face";
 import SmartToyIcon from "@mui/icons-material/SmartToy";
 import { Card, CardContent, Chip } from "@mui/material";
@@ -41,6 +41,6 @@ export const AgenticaChatTextMessageMovie = ({
 };
 export namespace AgenticaChatTextMessageMovie {
   export interface IProps {
-    prompt: IAgenticaPrompt.IText;
+    prompt: AgenticaTextPrompt;
   }
 }

package/src/movies/sides/AgenticaChatFunctionStackSideMovie.tsx

@@ -1,4 +1,4 @@
-import { IAgenticaOperationSelection } from "@agentica/core";
+import { AgenticaOperationSelection } from "@agentica/core";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import {
   Accordion,
@@ -11,7 +11,9 @@ import React from "react";
 
 import { MarkdownViewer } from "../../components/MarkdownViewer";
 
-export const AgenticaChatFunctionStackSideMovie = <Model extends ILlmSchema.Model>(
+export const AgenticaChatFunctionStackSideMovie = <
+  Model extends ILlmSchema.Model,
+>(
   props: AgenticaChatFunctionStackSideMovie.IProps<Model>,
 ) => {
   return (
@@ -22,9 +24,9 @@ export const AgenticaChatFunctionStackSideMovie = <Model extends ILlmSchema.Mode
         <Accordion>
           <AccordionSummary expandIcon={<ExpandMoreIcon />}>
             <Typography component="h6">
-              {select.protocol === "http"
-                ? `${select.function.method.toUpperCase()} ${select.function.path}`
-                : select.function.name}
+              {select.operation.protocol === "http"
+                ? `${select.operation.function.method.toUpperCase()} ${select.operation.function.path}`
+                : select.operation.function.name}
             </Typography>
           </AccordionSummary>
           <AccordionDetails>
@@ -32,7 +34,9 @@ export const AgenticaChatFunctionStackSideMovie = <Model extends ILlmSchema.Mode
             {select.reason}
             <br />
             <br />
-            <MarkdownViewer>{select.function.description}</MarkdownViewer>
+            <MarkdownViewer>
+              {select.operation.function.description}
+            </MarkdownViewer>
           </AccordionDetails>
         </Accordion>
       ))}
@@ -41,6 +45,6 @@ export const AgenticaChatFunctionStackSideMovie = <Model extends ILlmSchema.Mode
 };
 export namespace AgenticaChatFunctionStackSideMovie {
   export interface IProps<Model extends ILlmSchema.Model> {
-    selections: IAgenticaOperationSelection<Model>[];
+    selections: AgenticaOperationSelection<Model>[];
   }
 }

package/src/movies/sides/AgenticaChatSideMovie.tsx

@@ -1,7 +1,7 @@
 import {
+  AgenticaOperationSelection,
+  AgenticaTokenUsage,
   IAgenticaConfig,
-  IAgenticaOperationSelection,
-  IAgenticaTokenUsage,
   IAgenticaVendor,
 } from "@agentica/core";
 import { Typography } from "@mui/material";
@@ -58,8 +58,8 @@ export namespace AgenticaChatSideMovie {
   export interface IProps<Model extends ILlmSchema.Model> {
     vendor: IAgenticaVendor;
     config: IAgenticaConfig<Model> | undefined;
-    usage: IAgenticaTokenUsage;
-    selections: IAgenticaOperationSelection<Model>[];
+    usage: AgenticaTokenUsage;
+    selections: AgenticaOperationSelection<Model>[];
     error: Error | null;
   }
 }

package/src/movies/sides/AgenticaChatTokenUsageSideMovie.tsx

@@ -1,4 +1,4 @@
-import { IAgenticaTokenUsage } from "@agentica/core";
+import { AgenticaTokenUsage } from "@agentica/core";
 import {
   Table,
   TableBody,
@@ -54,7 +54,7 @@ export const AgenticaChatTokenUsageSideMovie = (
 };
 export namespace AgenticaChatTokenUsageSideMovie {
   export interface IProps {
-    usage: IAgenticaTokenUsage;
+    usage: AgenticaTokenUsage;
   }
 }
 
@@ -64,7 +64,7 @@ interface IPrice {
   completion: number;
 }
 
-const compute = (usage: IAgenticaTokenUsage): IPrice => {
+const compute = (usage: AgenticaTokenUsage): IPrice => {
   const prompt: number =
     (usage.aggregate.input.total - usage.aggregate.input.cached) *
       (2.5 / 1_000_000) +