@lov3kaizen/agentsea-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 lovekaizen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,85 @@
+# @agentsea/react
+
+React components for rendering AgentSea agent responses with formatting support.
+
+[![npm version](https://img.shields.io/npm/v/@agentsea/react.svg)](https://www.npmjs.com/package/@agentsea/react)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
+
+## Features
+
+- Markdown rendering with GitHub Flavored Markdown support
+- Code syntax highlighting
+- Streaming response support
+- Customizable styling
+
+## Installation
+
+```bash
+npm install @agentsea/react @agentsea/core react react-dom
+# or
+pnpm add @agentsea/react @agentsea/core react react-dom
+# or
+yarn add @agentsea/react @agentsea/core react react-dom
+```
+
+## Quick Start
+
+```tsx
+import { AgentResponse } from '@agentsea/react';
+
+function ChatMessage({ content }: { content: string }) {
+  return <AgentResponse content={content} />;
+}
+```
+
+## Components
+
+### AgentResponse
+
+Renders agent response content with markdown formatting:
+
+```tsx
+import { AgentResponse } from '@agentsea/react';
+
+<AgentResponse
+  content="# Hello World\n\nThis is **markdown** content."
+  className="my-response"
+/>;
+```
+
+### StreamingResponse
+
+For streaming responses:
+
+```tsx
+import { StreamingResponse } from '@agentsea/react';
+
+<StreamingResponse content={streamingContent} isStreaming={true} />;
+```
+
+## Styling
+
+Components can be styled using CSS classes or inline styles:
+
+```tsx
+<AgentResponse
+  content={content}
+  className="custom-response"
+  style={{ maxWidth: '600px' }}
+/>
+```
+
+## Documentation
+
+Full documentation available at [agentsea.dev](https://agentsea.dev)
+
+## Related Packages
+
+- [@agentsea/core](https://www.npmjs.com/package/@agentsea/core) - Core library
+- [@agentsea/nestjs](https://www.npmjs.com/package/@agentsea/nestjs) - NestJS integration
+- [@agentsea/cli](https://www.npmjs.com/package/@agentsea/cli) - Command-line interface
+
+## License
+
+MIT License - see [LICENSE](../../LICENSE) for details

package/dist/index.d.mts

@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { AgentResponse as AgentResponse$1, FormattedContent, StreamEvent } from '@lov3kaizen/agentsea-core';
+
+interface AgentResponseProps {
+    response: AgentResponse$1;
+    className?: string;
+    showMetadata?: boolean;
+    theme?: 'light' | 'dark' | 'auto';
+    components?: React.ComponentProps<typeof ReactMarkdown>['components'];
+}
+declare const AgentResponse: React.FC<AgentResponseProps>;
+declare const useFormattedContent: (content: string, format?: "text" | "markdown" | "html" | "react") => FormattedContent | null;
+
+interface StreamingResponseProps {
+    stream: AsyncIterable<StreamEvent>;
+    className?: string;
+    showMetadata?: boolean;
+    theme?: 'light' | 'dark' | 'auto';
+    onComplete?: (content: string) => void;
+}
+declare const StreamingResponse: React.FC<StreamingResponseProps>;
+declare const useStreamingContent: () => {
+    content: string;
+    isStreaming: boolean;
+    metadata: any;
+    consumeStream: (stream: AsyncIterable<StreamEvent>) => Promise<void>;
+};
+
+export { AgentResponse, type AgentResponseProps, StreamingResponse, type StreamingResponseProps, useFormattedContent, useStreamingContent };

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { AgentResponse as AgentResponse$1, FormattedContent, StreamEvent } from '@lov3kaizen/agentsea-core';
+
+interface AgentResponseProps {
+    response: AgentResponse$1;
+    className?: string;
+    showMetadata?: boolean;
+    theme?: 'light' | 'dark' | 'auto';
+    components?: React.ComponentProps<typeof ReactMarkdown>['components'];
+}
+declare const AgentResponse: React.FC<AgentResponseProps>;
+declare const useFormattedContent: (content: string, format?: "text" | "markdown" | "html" | "react") => FormattedContent | null;
+
+interface StreamingResponseProps {
+    stream: AsyncIterable<StreamEvent>;
+    className?: string;
+    showMetadata?: boolean;
+    theme?: 'light' | 'dark' | 'auto';
+    onComplete?: (content: string) => void;
+}
+declare const StreamingResponse: React.FC<StreamingResponseProps>;
+declare const useStreamingContent: () => {
+    content: string;
+    isStreaming: boolean;
+    metadata: any;
+    consumeStream: (stream: AsyncIterable<StreamEvent>) => Promise<void>;
+};
+
+export { AgentResponse, type AgentResponseProps, StreamingResponse, type StreamingResponseProps, useFormattedContent, useStreamingContent };

package/dist/index.js

@@ -0,0 +1,268 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AgentResponse: () => AgentResponse,
+  StreamingResponse: () => StreamingResponse,
+  useFormattedContent: () => useFormattedContent,
+  useStreamingContent: () => useStreamingContent
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/AgentResponse.tsx
+var import_react = __toESM(require("react"));
+var import_react_markdown = __toESM(require("react-markdown"));
+var import_remark_gfm = __toESM(require("remark-gfm"));
+var import_rehype_highlight = __toESM(require("rehype-highlight"));
+var import_rehype_raw = __toESM(require("rehype-raw"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var AgentResponse = ({
+  response,
+  className = "",
+  showMetadata = false,
+  theme = "auto",
+  components
+}) => {
+  const formatted = response.formatted;
+  const content = formatted?.raw || response.content;
+  const shouldRenderMarkdown = !formatted || formatted.format === "markdown" || formatted.format === "react";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `agentsea-response ${className}`, "data-theme": theme, children: [
+    shouldRenderMarkdown ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_markdown.default,
+      {
+        remarkPlugins: [import_remark_gfm.default],
+        rehypePlugins: [import_rehype_highlight.default, import_rehype_raw.default],
+        components,
+        children: content
+      }
+    ) : formatted?.format === "html" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: formatted.rendered || content }
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "agentsea-text-content", children: content }),
+    showMetadata && response.metadata && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "agentsea-metadata", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "metadata-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: "Tokens:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "value", children: response.metadata.tokensUsed })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "metadata-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: "Latency:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "value", children: [
+          response.metadata.latencyMs,
+          "ms"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "metadata-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: "Iterations:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "value", children: response.metadata.iterations })
+      ] }),
+      response.metadata.cost && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "metadata-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: "Cost:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "value", children: [
+          "$",
+          response.metadata.cost.toFixed(4)
+        ] })
+      ] })
+    ] }),
+    showMetadata && formatted?.metadata && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "agentsea-content-metadata", children: [
+      formatted.metadata.hasCodeBlocks && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "badge", children: "Code" }),
+      formatted.metadata.hasTables && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "badge", children: "Tables" }),
+      formatted.metadata.hasLists && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "badge", children: "Lists" }),
+      formatted.metadata.links && formatted.metadata.links.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "badge", children: [
+        formatted.metadata.links.length,
+        " Links"
+      ] })
+    ] })
+  ] });
+};
+var useFormattedContent = (content, format) => {
+  const [formatted, setFormatted] = import_react.default.useState(
+    null
+  );
+  import_react.default.useEffect(() => {
+    setFormatted({
+      raw: content,
+      format: format || "markdown",
+      rendered: content
+    });
+  }, [content, format]);
+  return formatted;
+};
+
+// src/StreamingResponse.tsx
+var import_react2 = __toESM(require("react"));
+var import_react_markdown2 = __toESM(require("react-markdown"));
+var import_remark_gfm2 = __toESM(require("remark-gfm"));
+var import_rehype_highlight2 = __toESM(require("rehype-highlight"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var StreamingResponse = ({
+  stream,
+  className = "",
+  showMetadata = false,
+  theme = "auto",
+  onComplete
+}) => {
+  const [content, setContent] = import_react2.default.useState("");
+  const [metadata, setMetadata] = import_react2.default.useState(null);
+  const [isComplete, setIsComplete] = import_react2.default.useState(false);
+  const [currentIteration, setCurrentIteration] = import_react2.default.useState(0);
+  import_react2.default.useEffect(() => {
+    let isMounted = true;
+    const consumeStream = async () => {
+      try {
+        for await (const event of stream) {
+          if (!isMounted) break;
+          switch (event.type) {
+            case "iteration":
+              setCurrentIteration(event.iteration);
+              break;
+            case "content":
+              if (event.delta) {
+                setContent((prev) => prev + (event.content || ""));
+              } else {
+                setContent(event.content || "");
+              }
+              break;
+            case "done":
+              setMetadata(event.metadata);
+              setIsComplete(true);
+              if (onComplete) {
+                onComplete(content);
+              }
+              break;
+            case "error":
+              console.error("Stream error:", event.error);
+              break;
+          }
+        }
+      } catch (error) {
+        console.error("Error consuming stream:", error);
+      }
+    };
+    consumeStream();
+    return () => {
+      isMounted = false;
+    };
+  }, [stream, onComplete, content]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: `agentsea-streaming-response ${className}`,
+      "data-theme": theme,
+      children: [
+        !isComplete && showMetadata && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "streaming-indicator", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "spinner" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+            "Iteration ",
+            currentIteration
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react_markdown2.default,
+          {
+            remarkPlugins: [import_remark_gfm2.default],
+            rehypePlugins: [import_rehype_highlight2.default],
+            children: content
+          }
+        ),
+        !isComplete && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "cursor", children: "\u258A" }),
+        isComplete && showMetadata && metadata && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "agentsea-metadata", children: [
+          metadata.tokensUsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "metadata-item", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "label", children: "Tokens:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "value", children: metadata.tokensUsed })
+          ] }),
+          metadata.latencyMs && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "metadata-item", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "label", children: "Latency:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "value", children: [
+              metadata.latencyMs,
+              "ms"
+            ] })
+          ] }),
+          metadata.iterations && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "metadata-item", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "label", children: "Iterations:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "value", children: metadata.iterations })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var useStreamingContent = () => {
+  const [content, setContent] = import_react2.default.useState("");
+  const [isStreaming, setIsStreaming] = import_react2.default.useState(false);
+  const [metadata, setMetadata] = import_react2.default.useState(null);
+  const consumeStream = import_react2.default.useCallback(
+    async (stream) => {
+      setIsStreaming(true);
+      setContent("");
+      setMetadata(null);
+      try {
+        for await (const event of stream) {
+          switch (event.type) {
+            case "content":
+              if (event.delta) {
+                setContent((prev) => prev + (event.content || ""));
+              } else {
+                setContent(event.content || "");
+              }
+              break;
+            case "done":
+              setMetadata(event.metadata);
+              setIsStreaming(false);
+              break;
+            case "error":
+              console.error("Stream error:", event.error);
+              setIsStreaming(false);
+              break;
+          }
+        }
+      } catch (error) {
+        console.error("Error consuming stream:", error);
+        setIsStreaming(false);
+      }
+    },
+    []
+  );
+  return {
+    content,
+    isStreaming,
+    metadata,
+    consumeStream
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AgentResponse,
+  StreamingResponse,
+  useFormattedContent,
+  useStreamingContent
+});

package/dist/index.mjs

@@ -0,0 +1,228 @@
+// src/AgentResponse.tsx
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+import rehypeRaw from "rehype-raw";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AgentResponse = ({
+  response,
+  className = "",
+  showMetadata = false,
+  theme = "auto",
+  components
+}) => {
+  const formatted = response.formatted;
+  const content = formatted?.raw || response.content;
+  const shouldRenderMarkdown = !formatted || formatted.format === "markdown" || formatted.format === "react";
+  return /* @__PURE__ */ jsxs("div", { className: `agentsea-response ${className}`, "data-theme": theme, children: [
+    shouldRenderMarkdown ? /* @__PURE__ */ jsx(
+      ReactMarkdown,
+      {
+        remarkPlugins: [remarkGfm],
+        rehypePlugins: [rehypeHighlight, rehypeRaw],
+        components,
+        children: content
+      }
+    ) : formatted?.format === "html" ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: formatted.rendered || content }
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "agentsea-text-content", children: content }),
+    showMetadata && response.metadata && /* @__PURE__ */ jsxs("div", { className: "agentsea-metadata", children: [
+      /* @__PURE__ */ jsxs("div", { className: "metadata-item", children: [
+        /* @__PURE__ */ jsx("span", { className: "label", children: "Tokens:" }),
+        /* @__PURE__ */ jsx("span", { className: "value", children: response.metadata.tokensUsed })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "metadata-item", children: [
+        /* @__PURE__ */ jsx("span", { className: "label", children: "Latency:" }),
+        /* @__PURE__ */ jsxs("span", { className: "value", children: [
+          response.metadata.latencyMs,
+          "ms"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "metadata-item", children: [
+        /* @__PURE__ */ jsx("span", { className: "label", children: "Iterations:" }),
+        /* @__PURE__ */ jsx("span", { className: "value", children: response.metadata.iterations })
+      ] }),
+      response.metadata.cost && /* @__PURE__ */ jsxs("div", { className: "metadata-item", children: [
+        /* @__PURE__ */ jsx("span", { className: "label", children: "Cost:" }),
+        /* @__PURE__ */ jsxs("span", { className: "value", children: [
+          "$",
+          response.metadata.cost.toFixed(4)
+        ] })
+      ] })
+    ] }),
+    showMetadata && formatted?.metadata && /* @__PURE__ */ jsxs("div", { className: "agentsea-content-metadata", children: [
+      formatted.metadata.hasCodeBlocks && /* @__PURE__ */ jsx("span", { className: "badge", children: "Code" }),
+      formatted.metadata.hasTables && /* @__PURE__ */ jsx("span", { className: "badge", children: "Tables" }),
+      formatted.metadata.hasLists && /* @__PURE__ */ jsx("span", { className: "badge", children: "Lists" }),
+      formatted.metadata.links && formatted.metadata.links.length > 0 && /* @__PURE__ */ jsxs("span", { className: "badge", children: [
+        formatted.metadata.links.length,
+        " Links"
+      ] })
+    ] })
+  ] });
+};
+var useFormattedContent = (content, format) => {
+  const [formatted, setFormatted] = React.useState(
+    null
+  );
+  React.useEffect(() => {
+    setFormatted({
+      raw: content,
+      format: format || "markdown",
+      rendered: content
+    });
+  }, [content, format]);
+  return formatted;
+};
+
+// src/StreamingResponse.tsx
+import React2 from "react";
+import ReactMarkdown2 from "react-markdown";
+import remarkGfm2 from "remark-gfm";
+import rehypeHighlight2 from "rehype-highlight";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var StreamingResponse = ({
+  stream,
+  className = "",
+  showMetadata = false,
+  theme = "auto",
+  onComplete
+}) => {
+  const [content, setContent] = React2.useState("");
+  const [metadata, setMetadata] = React2.useState(null);
+  const [isComplete, setIsComplete] = React2.useState(false);
+  const [currentIteration, setCurrentIteration] = React2.useState(0);
+  React2.useEffect(() => {
+    let isMounted = true;
+    const consumeStream = async () => {
+      try {
+        for await (const event of stream) {
+          if (!isMounted) break;
+          switch (event.type) {
+            case "iteration":
+              setCurrentIteration(event.iteration);
+              break;
+            case "content":
+              if (event.delta) {
+                setContent((prev) => prev + (event.content || ""));
+              } else {
+                setContent(event.content || "");
+              }
+              break;
+            case "done":
+              setMetadata(event.metadata);
+              setIsComplete(true);
+              if (onComplete) {
+                onComplete(content);
+              }
+              break;
+            case "error":
+              console.error("Stream error:", event.error);
+              break;
+          }
+        }
+      } catch (error) {
+        console.error("Error consuming stream:", error);
+      }
+    };
+    consumeStream();
+    return () => {
+      isMounted = false;
+    };
+  }, [stream, onComplete, content]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: `agentsea-streaming-response ${className}`,
+      "data-theme": theme,
+      children: [
+        !isComplete && showMetadata && /* @__PURE__ */ jsxs2("div", { className: "streaming-indicator", children: [
+          /* @__PURE__ */ jsx2("span", { className: "spinner" }),
+          /* @__PURE__ */ jsxs2("span", { children: [
+            "Iteration ",
+            currentIteration
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          ReactMarkdown2,
+          {
+            remarkPlugins: [remarkGfm2],
+            rehypePlugins: [rehypeHighlight2],
+            children: content
+          }
+        ),
+        !isComplete && /* @__PURE__ */ jsx2("span", { className: "cursor", children: "\u258A" }),
+        isComplete && showMetadata && metadata && /* @__PURE__ */ jsxs2("div", { className: "agentsea-metadata", children: [
+          metadata.tokensUsed && /* @__PURE__ */ jsxs2("div", { className: "metadata-item", children: [
+            /* @__PURE__ */ jsx2("span", { className: "label", children: "Tokens:" }),
+            /* @__PURE__ */ jsx2("span", { className: "value", children: metadata.tokensUsed })
+          ] }),
+          metadata.latencyMs && /* @__PURE__ */ jsxs2("div", { className: "metadata-item", children: [
+            /* @__PURE__ */ jsx2("span", { className: "label", children: "Latency:" }),
+            /* @__PURE__ */ jsxs2("span", { className: "value", children: [
+              metadata.latencyMs,
+              "ms"
+            ] })
+          ] }),
+          metadata.iterations && /* @__PURE__ */ jsxs2("div", { className: "metadata-item", children: [
+            /* @__PURE__ */ jsx2("span", { className: "label", children: "Iterations:" }),
+            /* @__PURE__ */ jsx2("span", { className: "value", children: metadata.iterations })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var useStreamingContent = () => {
+  const [content, setContent] = React2.useState("");
+  const [isStreaming, setIsStreaming] = React2.useState(false);
+  const [metadata, setMetadata] = React2.useState(null);
+  const consumeStream = React2.useCallback(
+    async (stream) => {
+      setIsStreaming(true);
+      setContent("");
+      setMetadata(null);
+      try {
+        for await (const event of stream) {
+          switch (event.type) {
+            case "content":
+              if (event.delta) {
+                setContent((prev) => prev + (event.content || ""));
+              } else {
+                setContent(event.content || "");
+              }
+              break;
+            case "done":
+              setMetadata(event.metadata);
+              setIsStreaming(false);
+              break;
+            case "error":
+              console.error("Stream error:", event.error);
+              setIsStreaming(false);
+              break;
+          }
+        }
+      } catch (error) {
+        console.error("Error consuming stream:", error);
+        setIsStreaming(false);
+      }
+    },
+    []
+  );
+  return {
+    content,
+    isStreaming,
+    metadata,
+    consumeStream
+  };
+};
+export {
+  AgentResponse,
+  StreamingResponse,
+  useFormattedContent,
+  useStreamingContent
+};

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@lov3kaizen/agentsea-react",
+  "version": "0.1.0",
+  "description": "React components for rendering AgentSea agent responses with formatting support",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
+    "rehype-highlight": "^7.0.0",
+    "rehype-raw": "^7.0.0",
+    "@lov3kaizen/agentsea-core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitest/coverage-v8": "^1.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.0"
+  },
+  "keywords": [
+    "agentsea",
+    "react",
+    "components",
+    "markdown",
+    "rendering",
+    "formatting",
+    "ai",
+    "agents"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "author": "lovekaizen",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lovekaizen/agentsea.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://agentsea.dev",
+  "bugs": {
+    "url": "https://github.com/lovekaizen/agentsea/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --dts-resolve --clean --external react --external react-dom",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --dts-resolve --watch --external react --external react-dom",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "test:cov": "vitest run --coverage",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}