@agentica/chat 0.1.0

package/src/movies/messages/AgenticaChatTextMessageMovie.tsx

@@ -0,0 +1,46 @@
+import { IAgenticaPrompt } 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 = ({
+  prompt,
+}: AgenticaChatTextMessageMovie.IProps) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: prompt.role === "user" ? "flex-end" : "flex-start",
+      }}
+    >
+      <Card
+        elevation={3}
+        style={{
+          marginTop: 15,
+          marginBottom: 15,
+          marginLeft: prompt.role === "user" ? "15%" : undefined,
+          marginRight: prompt.role === "assistant" ? "15%" : undefined,
+          textAlign: prompt.role === "user" ? "right" : "left",
+          backgroundColor: prompt.role === "user" ? "lightyellow" : undefined,
+        }}
+      >
+        <CardContent>
+          <Chip
+            icon={prompt.role === "user" ? <FaceIcon /> : <SmartToyIcon />}
+            label={prompt.role === "user" ? "User" : "Assistant"}
+            variant="outlined"
+            color={prompt.role === "user" ? "primary" : "success"}
+          />
+          <MarkdownViewer>{prompt.text}</MarkdownViewer>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+export namespace AgenticaChatTextMessageMovie {
+  export interface IProps {
+    prompt: IAgenticaPrompt.IText;
+  }
+}

package/src/movies/sides/AgenticaChatFunctionStackSideMovie.tsx

@@ -0,0 +1,46 @@
+import { IAgenticaOperationSelection } from "@agentica/core";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Typography,
+} from "@mui/material";
+import { ILlmSchema } from "@samchon/openapi";
+import React from "react";
+
+import { MarkdownViewer } from "../../components/MarkdownViewer";
+
+export const AgenticaChatFunctionStackSideMovie = <Model extends ILlmSchema.Model>(
+  props: AgenticaChatFunctionStackSideMovie.IProps<Model>,
+) => {
+  return (
+    <React.Fragment>
+      <Typography variant="h5"> Function Stack </Typography>
+      <hr />
+      {props.selections.map((select) => (
+        <Accordion>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography component="h6">
+              {select.protocol === "http"
+                ? `${select.function.method.toUpperCase()} ${select.function.path}`
+                : select.function.name}
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <hr />
+            {select.reason}
+            <br />
+            <br />
+            <MarkdownViewer>{select.function.description}</MarkdownViewer>
+          </AccordionDetails>
+        </Accordion>
+      ))}
+    </React.Fragment>
+  );
+};
+export namespace AgenticaChatFunctionStackSideMovie {
+  export interface IProps<Model extends ILlmSchema.Model> {
+    selections: IAgenticaOperationSelection<Model>[];
+  }
+}

package/src/movies/sides/AgenticaChatSideMovie.tsx

@@ -0,0 +1,65 @@
+import {
+  IAgenticaConfig,
+  IAgenticaOperationSelection,
+  IAgenticaTokenUsage,
+  IAgenticaVendor,
+} from "@agentica/core";
+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>,
+) => {
+  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}
+      <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}
+        </li>
+      </ul>
+      <br />
+      <br />
+      <AgenticaChatTokenUsageSideMovie usage={props.usage} />
+      <br />
+      <br />
+      <AgenticaChatFunctionStackSideMovie selections={props.selections} />
+    </div>
+  );
+};
+export namespace AgenticaChatSideMovie {
+  export interface IProps<Model extends ILlmSchema.Model> {
+    vendor: IAgenticaVendor;
+    config: IAgenticaConfig<Model> | undefined;
+    usage: IAgenticaTokenUsage;
+    selections: IAgenticaOperationSelection<Model>[];
+    error: Error | null;
+  }
+}

package/src/movies/sides/AgenticaChatTokenUsageSideMovie.tsx

@@ -0,0 +1,78 @@
+import { IAgenticaTokenUsage } from "@agentica/core";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import React from "react";
+
+export const AgenticaChatTokenUsageSideMovie = (
+  props: AgenticaChatTokenUsageSideMovie.IProps,
+) => {
+  const price: IPrice = compute(props.usage);
+  return (
+    <React.Fragment>
+      <Typography variant="h5"> Token Usage </Typography>
+      <hr />
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Type</TableCell>
+            <TableCell>Token Usage</TableCell>
+            <TableCell>Price</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCell>Total</TableCell>
+            <TableCell>
+              {props.usage.aggregate.total.toLocaleString()}
+            </TableCell>
+            <TableCell>${price.total.toLocaleString()}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Input</TableCell>
+            <TableCell>
+              {props.usage.aggregate.input.total.toLocaleString()}
+            </TableCell>
+            <TableCell>${price.prompt.toLocaleString()}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Output</TableCell>
+            <TableCell>
+              {props.usage.aggregate.output.total.toLocaleString()}
+            </TableCell>
+            <TableCell>${price.completion.toLocaleString()}</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </React.Fragment>
+  );
+};
+export namespace AgenticaChatTokenUsageSideMovie {
+  export interface IProps {
+    usage: IAgenticaTokenUsage;
+  }
+}
+
+interface IPrice {
+  total: number;
+  prompt: number;
+  completion: number;
+}
+
+const compute = (usage: IAgenticaTokenUsage): IPrice => {
+  const prompt: number =
+    (usage.aggregate.input.total - usage.aggregate.input.cached) *
+      (2.5 / 1_000_000) +
+    usage.aggregate.input.cached * (1.25 / 1_000_000);
+  const completion: number = usage.aggregate.output.total * (10.0 / 1_000_000);
+  return {
+    total: prompt + completion,
+    prompt,
+    completion,
+  };
+};