@agentica/chat 0.15.5 → 0.15.7

package/package.json

@@ -1,14 +1,18 @@
 {
-  "type": "module",
   "name": "@agentica/chat",
-  "version": "0.15.5",
-  "main": "./lib/index.mjs",
-  "typings": "./lib/index.d.ts",
+  "type": "module",
+  "version": "0.15.7",
   "description": "Frontend Application of Agentica",
+  "author": "Wrtn Technologies",
+  "license": "MIT",
+  "homepage": "https://wrtnlabs.io/agentica",
   "repository": {
     "type": "git",
     "url": "https://github.com/wrtnlabs/agentica"
   },
+  "bugs": {
+    "url": "https://github.com/wrtnlabs/agentica/issues"
+  },
   "keywords": [
     "openapi",
     "swagger",
@@ -19,12 +23,17 @@
     "nestjs",
     "nestia"
   ],
-  "author": "Wrtn Technologies",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/wrtnlabs/agentica/issues"
-  },
-  "homepage": "https://wrtnlabs.io/agentica",
+  "main": "./lib/index.mjs",
+  "typings": "./lib/index.d.ts",
+  "files": [
+    "!src/examples",
+    "LICENSE",
+    "README.md",
+    "dist",
+    "lib",
+    "package.json",
+    "src"
+  ],
   "dependencies": {
     "@mui/icons-material": "^6.4.0",
     "@mui/material": "^6.4.0",
@@ -37,7 +46,7 @@
     "remark-mermaid-plugin": "^1.0.2",
     "typia": "^8.1.1",
     "uuid": "^11.0.5",
-    "@agentica/core": "^0.15.5"
+    "@agentica/core": "^0.15.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
@@ -52,13 +61,12 @@
     "@types/react-json-editor-ajrm": "^2.5.6",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.3.3",
-    "eslint": "^9.23.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",
+    "openai": "^4.80.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-json-editor-ajrm": "^2.5.14",
@@ -70,15 +78,6 @@
     "typescript-eslint": "^8.10.0",
     "vite": "^5.4.9"
   },
-  "files": [
-    "README.md",
-    "LICENSE",
-    "package.json",
-    "dist",
-    "lib",
-    "src",
-    "!src/examples"
-  ],
   "scripts": {
     "build": "npm run build:static && npm run build:lib",
     "build:static": "rimraf dist && tsc -b && vite build",

package/src/AgenticaChatApplication.tsx

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

package/src/README.md

@@ -1,4 +1,5 @@
 # Agentica Chat Application
+
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/wrtnlabs/agentica/blob/master/LICENSE)
 [![npm version](https://img.shields.io/npm/v/@agentica/chat.svg)](https://www.npmjs.com/package/@agentica/chat)
 [![Downloads](https://img.shields.io/npm/dm/@agentica/chat.svg)](https://www.npmjs.com/package/@agentica/chat)
@@ -8,6 +9,8 @@ A frontend application of Agentica chatbot for rapid demonstration.
 
 This is not for final production, but just for demonstration. So please do not use this package globally. You have to utilize this package only for the internal demonstration.
 
+<!-- eslint-skip -->
+
 ```tsx
 import { Agentica } from "@agentica/core";
 import { AgenticaChatApplication } from "@agentica/chat";
@@ -15,11 +18,11 @@ import typia from "typia";
 
 const agent = new Agentica({ ... });
 ReactDOM.render(
-  <AgenticaChatApplication agent={agent} />, 
+  <AgenticaChatApplication agent={agent} />,
   document.body,
 );
 ```
 
 > https://github.com/user-attachments/assets/01604b53-aca4-41cb-91aa-3faf63549ea6
 >
-> Demonstration video of Shopping AI Chatbot
+> Demonstration video of Shopping AI Chatbot

package/src/components/MarkdownViewer.tsx

@@ -3,7 +3,7 @@ import rehypeRaw from "rehype-raw";
 import rehypeStringify from "rehype-stringify";
 import remarkMermaidPlugin from "remark-mermaid-plugin";
 
-export const MarkdownViewer = (props: MarkdownViewer.IProps) => {
+export function MarkdownViewer(props: MarkdownViewer.IProps) {
   return (
     <Markdown
       remarkPlugins={[remarkMermaidPlugin as any]}
@@ -24,7 +24,7 @@ export const MarkdownViewer = (props: MarkdownViewer.IProps) => {
       {props.children}
     </Markdown>
   );
-};
+}
 export namespace MarkdownViewer {
   export interface IProps {
     children: string | null | undefined;

package/src/movies/AgenticaChatMovie.tsx

@@ -1,3 +1,10 @@
+import type { Agentica, AgenticaDescribeEvent, AgenticaOperationSelection, AgenticaPrompt, AgenticaSelectEvent, AgenticaTextEvent, AgenticaTokenUsage, AgenticaValidateEvent } from "@agentica/core";
+import type {
+  Theme,
+} from "@mui/material";
+import type { ILlmSchema } from "@samchon/openapi";
+import type { ReactElement } from "react";
+
 import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
 import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
 import SendIcon from "@mui/icons-material/Send";
@@ -16,13 +23,6 @@ import {
 import { toPng } from "html-to-image";
 import React, { useEffect, useRef, useState } from "react";
 
-import type { Agentica, AgenticaDescribeEvent, AgenticaOperationSelection, AgenticaPrompt, AgenticaSelectEvent, AgenticaTextEvent, AgenticaTokenUsage, AgenticaValidateEvent } from "@agentica/core";
-import type {
-  Theme,
-} from "@mui/material";
-import type { ILlmSchema } from "@samchon/openapi";
-import type { ReactElement } from "react";
-
 import { AgenticaChatMessageMovie } from "./messages/AgenticaChatMessageMovie";
 import { AgenticaChatSideMovie } from "./sides/AgenticaChatSideMovie";
 
@@ -102,17 +102,6 @@ export function AgenticaChatMovie<Model extends ILlmSchema.Model>({
   }, []);
 
   // 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 (
@@ -173,6 +162,17 @@ export function AgenticaChatMovie<Model extends ILlmSchema.Model>({
     setSelections(selections);
   };
 
+  const handleKeyUp = async (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    if (event.key === "Enter" && event.shiftKey === false) {
+      if (enabled === false) {
+        event.preventDefault();
+      }
+      else {
+        await conversate();
+      }
+    }
+  };
+
   const capture = async () => {
     if (bodyContainerRef.current === null) {
       return;
@@ -251,7 +251,7 @@ export function AgenticaChatMovie<Model extends ILlmSchema.Model>({
           {isMobile
             ? (
                 <>
-                  <IconButton onClick={capture}>
+                  <IconButton onClick={void capture}>
                     <AddAPhotoIcon />
                   </IconButton>
                   <IconButton onClick={() => setOpenSide(true)}>
@@ -263,7 +263,7 @@ export function AgenticaChatMovie<Model extends ILlmSchema.Model>({
                 <Button
                   color="inherit"
                   startIcon={<AddAPhotoIcon />}
-                  onClick={capture}
+                  onClick={void capture}
                 >
                   Screenshot Capture
                 </Button>
@@ -312,7 +312,7 @@ export function AgenticaChatMovie<Model extends ILlmSchema.Model>({
             placeholder="Conversate with AI Chatbot"
             value={text}
             multiline={true}
-            onKeyUp={handleKeyUp}
+            onKeyUp={e => void handleKeyUp(e)}
             onChange={(e) => {
               setText(e.target.value);
               handleResize();
@@ -323,7 +323,7 @@ export function AgenticaChatMovie<Model extends ILlmSchema.Model>({
             style={{ marginLeft: 10 }}
             startIcon={<SendIcon />}
             disabled={!enabled}
-            onClick={conversate}
+            onClick={void conversate}
           >
             Send
           </Button>

package/src/movies/messages/AgenticaChatDescribeMessageMovie.tsx

@@ -1,4 +1,6 @@
-import { AgenticaDescribePrompt } from "@agentica/core";
+import type { AgenticaDescribePrompt } from "@agentica/core";
+import type { ILlmSchema } from "@samchon/openapi";
+
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import {
   Button,
@@ -8,17 +10,17 @@ import {
   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 = <
+export function AgenticaChatDescribeMessageMovie<
   Model extends ILlmSchema.Model,
 >({
   prompt,
-}: AgenticaChatDescribeMessageMovie.IProps<Model>) => {
+}: AgenticaChatDescribeMessageMovie.IProps<Model>) {
   const [expanded, setExpanded] = useState(false);
   return (
     <Card
@@ -35,13 +37,13 @@ export const AgenticaChatDescribeMessageMovie = <
       </CardContent>
       <CardActions style={{ textAlign: "right" }}>
         <Button
-          startIcon={
+          startIcon={(
             <ExpandMoreIcon
               style={{
                 transform: `rotate(${expanded ? 180 : 0}deg)`,
               }}
             />
-          }
+          )}
           onClick={() => setExpanded(!expanded)}
         >
           {expanded ? "Hide Function Calls" : "Show Function Calls"}
@@ -49,14 +51,14 @@ export const AgenticaChatDescribeMessageMovie = <
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          {prompt.executes.map((execute) => (
+          {prompt.executes.map(execute => (
             <AgenticaChatExecuteMessageMovie execute={execute} />
           ))}
         </CardContent>
       </Collapse>
     </Card>
   );
-};
+}
 export namespace AgenticaChatDescribeMessageMovie {
   export interface IProps<Model extends ILlmSchema.Model> {
     prompt: AgenticaDescribePrompt<Model>;

package/src/movies/messages/AgenticaChatExecuteMessageMovie.tsx

@@ -1,18 +1,23 @@
-import { AgenticaExecutePrompt } from "@agentica/core";
+import type { AgenticaExecutePrompt } from "@agentica/core";
+import type { ILlmSchema } from "@samchon/openapi";
+
 import { Typography } from "@mui/material";
-import { ILlmSchema } from "@samchon/openapi";
 import React from "react";
 
 import { MarkdownViewer } from "../../components/MarkdownViewer";
 
-export const AgenticaChatExecuteMessageMovie = <
+export function AgenticaChatExecuteMessageMovie<
   Model extends ILlmSchema.Model,
 >({
   execute,
-}: AgenticaChatExecuteMessageMovie.IProps<Model>) => {
+}: AgenticaChatExecuteMessageMovie.IProps<Model>) {
   return (
     <React.Fragment>
-      <Typography variant="h5"> {getTitle(execute)} </Typography>
+      <Typography variant="h5">
+        {" "}
+        {getTitle(execute)}
+        {" "}
+      </Typography>
       <hr />
       <Typography variant="h6"> Description </Typography>
       <MarkdownViewer>{execute.operation.function.description}</MarkdownViewer>
@@ -30,16 +35,15 @@ export const AgenticaChatExecuteMessageMovie = <
       </MarkdownViewer>
     </React.Fragment>
   );
-};
+}
 export namespace AgenticaChatExecuteMessageMovie {
   export interface IProps<Model extends ILlmSchema.Model> {
     execute: AgenticaExecutePrompt<Model>;
   }
 }
 
-const getTitle = <Model extends ILlmSchema.Model>(
-  exec: AgenticaExecutePrompt<Model>,
-) =>
-  exec.operation.protocol === "http"
+function getTitle<Model extends ILlmSchema.Model>(exec: AgenticaExecutePrompt<Model>) {
+  return exec.operation.protocol === "http"
     ? `${exec.operation.function.method.toUpperCase()} ${exec.operation.function.path}`
     : exec.operation.function.name;
+}

package/src/movies/messages/AgenticaChatMessageMovie.tsx

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

package/src/movies/messages/AgenticaChatSelectMessageMovie.tsx

@@ -1,4 +1,6 @@
-import { AgenticaOperationSelection } from "@agentica/core";
+import type { AgenticaOperationSelection } from "@agentica/core";
+import type { ILlmSchema } from "@samchon/openapi";
+
 import GradingIcon from "@mui/icons-material/Grading";
 import {
   Button,
@@ -8,14 +10,13 @@ import {
   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>({
+export function AgenticaChatSelectMessageMovie<Model extends ILlmSchema.Model>({
   selection,
-}: AgenticaChatSelectMessageMovie.IProps<Model>) => {
+}: AgenticaChatSelectMessageMovie.IProps<Model>) {
   const [expanded, setExpanded] = useState(false);
   return (
     <Card
@@ -36,16 +37,18 @@ export const AgenticaChatSelectMessageMovie = <Model extends ILlmSchema.Model>({
         <br />
         <br />
         Operation:
-        {selection.operation.protocol === "http" ? (
-          <ul>
-            <li>{selection.operation.function.method.toUpperCase()}</li>
-            <li>{selection.operation.function.path}</li>
-          </ul>
-        ) : (
-          <ul>
-            <li>{selection.operation.function.name}</li>
-          </ul>
-        )}
+        {selection.operation.protocol === "http"
+          ? (
+              <ul>
+                <li>{selection.operation.function.method.toUpperCase()}</li>
+                <li>{selection.operation.function.path}</li>
+              </ul>
+            )
+          : (
+              <ul>
+                <li>{selection.operation.function.name}</li>
+              </ul>
+            )}
         <MarkdownViewer>{selection.reason}</MarkdownViewer>
       </CardContent>
       <CardActions style={{ textAlign: "right" }}>
@@ -62,7 +65,7 @@ export const AgenticaChatSelectMessageMovie = <Model extends ILlmSchema.Model>({
       </Collapse>
     </Card>
   );
-};
+}
 export namespace AgenticaChatSelectMessageMovie {
   export interface IProps<Model extends ILlmSchema.Model> {
     selection: AgenticaOperationSelection<Model>;

package/src/movies/messages/AgenticaChatTextMessageMovie.tsx

@@ -1,13 +1,14 @@
-import { AgenticaTextPrompt } from "@agentica/core";
+import type { 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";
 
 import { MarkdownViewer } from "../../components/MarkdownViewer";
 
-export const AgenticaChatTextMessageMovie = ({
+export function AgenticaChatTextMessageMovie({
   prompt,
-}: AgenticaChatTextMessageMovie.IProps) => {
+}: AgenticaChatTextMessageMovie.IProps) {
   return (
     <div
       style={{
@@ -38,7 +39,7 @@ export const AgenticaChatTextMessageMovie = ({
       </Card>
     </div>
   );
-};
+}
 export namespace AgenticaChatTextMessageMovie {
   export interface IProps {
     prompt: AgenticaTextPrompt;

package/src/movies/sides/AgenticaChatFunctionStackSideMovie.tsx

@@ -1,4 +1,6 @@
-import { AgenticaOperationSelection } from "@agentica/core";
+import type { AgenticaOperationSelection } from "@agentica/core";
+import type { ILlmSchema } from "@samchon/openapi";
+
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import {
   Accordion,
@@ -6,21 +8,18 @@ import {
   AccordionSummary,
   Typography,
 } from "@mui/material";
-import { ILlmSchema } from "@samchon/openapi";
 import React from "react";
 
 import { MarkdownViewer } from "../../components/MarkdownViewer";
 
-export const AgenticaChatFunctionStackSideMovie = <
+export function AgenticaChatFunctionStackSideMovie<
   Model extends ILlmSchema.Model,
->(
-  props: AgenticaChatFunctionStackSideMovie.IProps<Model>,
-) => {
+>(props: AgenticaChatFunctionStackSideMovie.IProps<Model>) {
   return (
     <React.Fragment>
       <Typography variant="h5"> Function Stack </Typography>
       <hr />
-      {props.selections.map((select) => (
+      {props.selections.map(select => (
         <Accordion>
           <AccordionSummary expandIcon={<ExpandMoreIcon />}>
             <Typography component="h6">
@@ -42,7 +41,7 @@ export const AgenticaChatFunctionStackSideMovie = <
       ))}
     </React.Fragment>
   );
-};
+}
 export namespace AgenticaChatFunctionStackSideMovie {
   export interface IProps<Model extends ILlmSchema.Model> {
     selections: AgenticaOperationSelection<Model>[];

package/src/movies/sides/AgenticaChatSideMovie.tsx

@@ -1,48 +1,58 @@
-import {
+import type {
   AgenticaOperationSelection,
   AgenticaTokenUsage,
   IAgenticaConfig,
   IAgenticaVendor,
 } from "@agentica/core";
+import type { ILlmSchema } from "@samchon/openapi";
+
 import { Typography } from "@mui/material";
-import { ILlmSchema } from "@samchon/openapi";
 
 import { AgenticaChatFunctionStackSideMovie } from "./AgenticaChatFunctionStackSideMovie";
 import { AgenticaChatTokenUsageSideMovie } from "./AgenticaChatTokenUsageSideMovie";
 
-export const AgenticaChatSideMovie = <Model extends ILlmSchema.Model>(
-  props: AgenticaChatSideMovie.IProps<Model>,
-) => {
+export function AgenticaChatSideMovie<Model extends ILlmSchema.Model>(props: AgenticaChatSideMovie.IProps<Model>) {
   return (
     <div
       style={{
         padding: 25,
       }}
     >
-      {props.error !== null ? (
-        <>
-          <Typography variant="h5" color="error">
-            OpenAI Error
-          </Typography>
-          <hr />
-          {props.error.message}
-          <br />
-          <br />
-          Your OpenAI API key may not valid.
-          <br />
-          <br />
-          <br />
-        </>
-      ) : null}
+      {props.error !== null
+        ? (
+            <>
+              <Typography variant="h5" color="error">
+                OpenAI Error
+              </Typography>
+              <hr />
+              {props.error.message}
+              <br />
+              <br />
+              Your OpenAI API key may not valid.
+              <br />
+              <br />
+              <br />
+            </>
+          )
+        : null}
       <Typography variant="h5">Agent Information</Typography>
       <hr />
       <ul>
-        <li> Model: {props.vendor.model} </li>
-        <li> Locale: {props.config?.locale ?? navigator.language} </li>
         <li>
-          Timezone:{" "}
-          {props.config?.timezone ??
-            Intl.DateTimeFormat().resolvedOptions().timeZone}
+          {" "}
+          Model:
+          {props.vendor.model}
+        </li>
+        <li>
+          {" "}
+          Locale:
+          {props.config?.locale ?? navigator.language}
+        </li>
+        <li>
+          Timezone:
+          {" "}
+          {props.config?.timezone
+            ?? Intl.DateTimeFormat().resolvedOptions().timeZone}
         </li>
       </ul>
       <br />
@@ -53,7 +63,7 @@ export const AgenticaChatSideMovie = <Model extends ILlmSchema.Model>(
       <AgenticaChatFunctionStackSideMovie selections={props.selections} />
     </div>
   );
-};
+}
 export namespace AgenticaChatSideMovie {
   export interface IProps<Model extends ILlmSchema.Model> {
     vendor: IAgenticaVendor;