llmasaservice-ui 0.2.4 → 0.2.6

package/dist/index.css

@@ -151,6 +151,19 @@
 .side-panel .scroll-button:hover {
   background-color: #0056b3;
 }
+.side-panel table {
+  border-collapse: collapse;
+  margin-bottom: 1em;
+  border: 1px solid #777;
+}
+.side-panel th {
+  border: 1px solid #777;
+  padding: 8px;
+}
+.side-panel td {
+  border: 1px solid #777;
+  padding: 8px;
+}
 .side-panel-dark {
   font-family:
     "Roboto",
@@ -306,26 +319,16 @@
 .side-panel-dark .scroll-button:hover {
   background-color: #0056b3;
 }
-.chat-status {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px;
-  border-radius: 20px;
-  background-color: #f0f0f0;
-}
-.loading-dots {
-  font-size: 20px;
-  animation: blink 1s linear infinite;
-}
-@keyframes blink {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+.side-panel-dark table {
+  border-collapse: collapse;
+  margin-bottom: 1em;
+  border: 1px solid #ddd;
+}
+.side-panel-dark th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+.side-panel-dark td {
+  border: 1px solid #ddd;
+  padding: 8px;
 }

package/dist/index.d.mts

@@ -22,6 +22,9 @@ interface ChatPanelProps {
     url?: string | null;
     scrollToEnd?: boolean;
 }
-declare const ChatPanel: React.FC<ChatPanelProps>;
+interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
+    inline?: boolean;
+}
+declare const ChatPanel: React.FC<ChatPanelProps & ExtraProps>;
 
 export { ChatPanel, type ChatPanelProps };

package/dist/index.d.ts

@@ -22,6 +22,9 @@ interface ChatPanelProps {
     url?: string | null;
     scrollToEnd?: boolean;
 }
-declare const ChatPanel: React.FC<ChatPanelProps>;
+interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
+    inline?: boolean;
+}
+declare const ChatPanel: React.FC<ChatPanelProps & ExtraProps>;
 
 export { ChatPanel, type ChatPanelProps };

package/dist/index.js

@@ -22,6 +22,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -55,6 +67,9 @@ module.exports = __toCommonJS(llmasaservice_ui_exports);
 var import_llmasaservice_client = require("llmasaservice-client");
 var import_react = __toESM(require("react"));
 var import_react_markdown = __toESM(require("react-markdown"));
+var import_remark_gfm = __toESM(require("remark-gfm"));
+var import_react_syntax_highlighter = require("react-syntax-highlighter");
+var import_prism = require("react-syntax-highlighter/dist/cjs/styles/prism");
 var ChatPanel = ({
   project_id,
   initialPrompt = "",
@@ -167,6 +182,63 @@ var ChatPanel = ({
     var _a;
     (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
   };
+  const CodeBlock = (_a) => {
+    var _b = _a, { node, className, children, style } = _b, props = __objRest(_b, ["node", "className", "children", "style"]);
+    console.log("CodeBlock", className, children, style, props);
+    const match = /language-(\w+)/.exec(className || "");
+    return match ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          border: 0,
+          padding: 0,
+          height: "16px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", null, match ? match[1] : "Unknown"),
+      /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          onClick: () => copyToClipboard(children),
+          className: "copy-button"
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 320 320",
+            fill: "currentColor",
+            className: "icon-svg"
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            "path",
+            {
+              d: "M35,270h45v45c0,8.284,6.716,15,15,15h200c8.284,0,15-6.716,15-15V75c0-8.284-6.716-15-15-15h-45V15\r\n		c0-8.284-6.716-15-15-15H35c-8.284,0-15,6.716-15,15v240C20,263.284,26.716,270,35,270z M280,300H110V90h170V300z M50,30h170v30H95\r\n		c-8.284,0-15,6.716-15,15v165H50V30z"
+            }
+          ),
+          /* @__PURE__ */ import_react.default.createElement("path", { d: "M155,120c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15s-6.716-15-15-15H155z" }),
+          /* @__PURE__ */ import_react.default.createElement("path", { d: "M235,180h-80c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15S243.284,180,235,180z" }),
+          /* @__PURE__ */ import_react.default.createElement(
+            "path",
+            {
+              d: "M235,240h-80c-8.284,0-15,6.716-15,15c0,8.284,6.716,15,15,15h80c8.284,0,15-6.716,15-15C250,246.716,243.284,240,235,240z\r\n		"
+            }
+          )
+        )
+      )
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_react_syntax_highlighter.Prism,
+      __spreadValues({
+        style: theme === "light" ? import_prism.materialLight : import_prism.materialDark,
+        PreTag: "div",
+        language: match[1]
+      }, props),
+      String(children).replace(/\n$/, "")
+    )) : /* @__PURE__ */ import_react.default.createElement("code", __spreadValues({ className: className ? className : "" }, props), children);
+  };
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -174,7 +246,22 @@ var ChatPanel = ({
       className: "side-panel" + (theme === "light" ? "" : "-dark")
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: "title" }, title),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "responseArea", ref: responseAreaRef }, initialMessage && initialMessage !== "" ? /* @__PURE__ */ import_react.default.createElement("div", { className: "history-entry" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "response" }, /* @__PURE__ */ import_react.default.createElement(import_react_markdown.default, { className: markdownClass }, initialMessage))) : null, Object.entries(history).map(([prompt, response2], index) => /* @__PURE__ */ import_react.default.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ import_react.default.createElement("div", { className: "prompt" }, prompt), /* @__PURE__ */ import_react.default.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && isLoading ? /* @__PURE__ */ import_react.default.createElement("div", { className: "loading-text" }, "loading...") : null, /* @__PURE__ */ import_react.default.createElement(import_react_markdown.default, { className: markdownClass }, response2), /* @__PURE__ */ import_react.default.createElement("div", { className: "button-container" }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "responseArea", ref: responseAreaRef }, initialMessage && initialMessage !== "" ? /* @__PURE__ */ import_react.default.createElement("div", { className: "history-entry" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "response" }, /* @__PURE__ */ import_react.default.createElement(
+      import_react_markdown.default,
+      {
+        className: markdownClass,
+        remarkPlugins: [import_remark_gfm.default]
+      },
+      initialMessage
+    ))) : null, Object.entries(history).map(([prompt, response2], index) => /* @__PURE__ */ import_react.default.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ import_react.default.createElement("div", { className: "prompt" }, prompt), /* @__PURE__ */ import_react.default.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && isLoading ? /* @__PURE__ */ import_react.default.createElement("div", { className: "loading-text" }, "loading...") : null, /* @__PURE__ */ import_react.default.createElement(
+      import_react_markdown.default,
+      {
+        className: markdownClass,
+        remarkPlugins: [import_remark_gfm.default],
+        components: { code: CodeBlock }
+      },
+      response2
+    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "button-container" }, /* @__PURE__ */ import_react.default.createElement(
       "button",
       {
         className: "copy-button",

package/dist/index.mjs

@@ -17,11 +17,29 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 
 // src/ChatPanel.tsx
 import { useLLM } from "llmasaservice-client";
 import React, { useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+  materialLight,
+  materialDark
+} from "react-syntax-highlighter/dist/cjs/styles/prism";
 var ChatPanel = ({
   project_id,
   initialPrompt = "",
@@ -134,6 +152,63 @@ var ChatPanel = ({
     var _a;
     (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
   };
+  const CodeBlock = (_a) => {
+    var _b = _a, { node, className, children, style } = _b, props = __objRest(_b, ["node", "className", "children", "style"]);
+    console.log("CodeBlock", className, children, style, props);
+    const match = /language-(\w+)/.exec(className || "");
+    return match ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          border: 0,
+          padding: 0,
+          height: "16px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ React.createElement("span", null, match ? match[1] : "Unknown"),
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          onClick: () => copyToClipboard(children),
+          className: "copy-button"
+        },
+        /* @__PURE__ */ React.createElement(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 320 320",
+            fill: "currentColor",
+            className: "icon-svg"
+          },
+          /* @__PURE__ */ React.createElement(
+            "path",
+            {
+              d: "M35,270h45v45c0,8.284,6.716,15,15,15h200c8.284,0,15-6.716,15-15V75c0-8.284-6.716-15-15-15h-45V15\r\n		c0-8.284-6.716-15-15-15H35c-8.284,0-15,6.716-15,15v240C20,263.284,26.716,270,35,270z M280,300H110V90h170V300z M50,30h170v30H95\r\n		c-8.284,0-15,6.716-15,15v165H50V30z"
+            }
+          ),
+          /* @__PURE__ */ React.createElement("path", { d: "M155,120c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15s-6.716-15-15-15H155z" }),
+          /* @__PURE__ */ React.createElement("path", { d: "M235,180h-80c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15S243.284,180,235,180z" }),
+          /* @__PURE__ */ React.createElement(
+            "path",
+            {
+              d: "M235,240h-80c-8.284,0-15,6.716-15,15c0,8.284,6.716,15,15,15h80c8.284,0,15-6.716,15-15C250,246.716,243.284,240,235,240z\r\n		"
+            }
+          )
+        )
+      )
+    ), /* @__PURE__ */ React.createElement(
+      SyntaxHighlighter,
+      __spreadValues({
+        style: theme === "light" ? materialLight : materialDark,
+        PreTag: "div",
+        language: match[1]
+      }, props),
+      String(children).replace(/\n$/, "")
+    )) : /* @__PURE__ */ React.createElement("code", __spreadValues({ className: className ? className : "" }, props), children);
+  };
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -141,7 +216,22 @@ var ChatPanel = ({
       className: "side-panel" + (theme === "light" ? "" : "-dark")
     },
     /* @__PURE__ */ React.createElement("div", { className: "title" }, title),
-    /* @__PURE__ */ React.createElement("div", { className: "responseArea", ref: responseAreaRef }, initialMessage && initialMessage !== "" ? /* @__PURE__ */ React.createElement("div", { className: "history-entry" }, /* @__PURE__ */ React.createElement("div", { className: "response" }, /* @__PURE__ */ React.createElement(ReactMarkdown, { className: markdownClass }, initialMessage))) : null, Object.entries(history).map(([prompt, response2], index) => /* @__PURE__ */ React.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ React.createElement("div", { className: "prompt" }, prompt), /* @__PURE__ */ React.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && isLoading ? /* @__PURE__ */ React.createElement("div", { className: "loading-text" }, "loading...") : null, /* @__PURE__ */ React.createElement(ReactMarkdown, { className: markdownClass }, response2), /* @__PURE__ */ React.createElement("div", { className: "button-container" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "responseArea", ref: responseAreaRef }, initialMessage && initialMessage !== "" ? /* @__PURE__ */ React.createElement("div", { className: "history-entry" }, /* @__PURE__ */ React.createElement("div", { className: "response" }, /* @__PURE__ */ React.createElement(
+      ReactMarkdown,
+      {
+        className: markdownClass,
+        remarkPlugins: [remarkGfm]
+      },
+      initialMessage
+    ))) : null, Object.entries(history).map(([prompt, response2], index) => /* @__PURE__ */ React.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ React.createElement("div", { className: "prompt" }, prompt), /* @__PURE__ */ React.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && isLoading ? /* @__PURE__ */ React.createElement("div", { className: "loading-text" }, "loading...") : null, /* @__PURE__ */ React.createElement(
+      ReactMarkdown,
+      {
+        className: markdownClass,
+        remarkPlugins: [remarkGfm],
+        components: { code: CodeBlock }
+      },
+      response2
+    ), /* @__PURE__ */ React.createElement("div", { className: "button-container" }, /* @__PURE__ */ React.createElement(
       "button",
       {
         className: "copy-button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "llmasaservice-ui",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -30,6 +30,7 @@
     "@storybook/react-webpack5": "^8.2.7",
     "@storybook/test": "^8.2.7",
     "@types/react": "^18.3.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "react": "^18.3.1",
     "storybook": "^8.2.7",
     "tsup": "^8.2.4",
@@ -44,7 +45,9 @@
   ],
   "dependencies": {
     "llmasaservice-client": "^0.4.0",
-    "react-markdown": "^9.0.1"
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^4.0.0"
   },
   "peerDependencies": {
     "react": "^18.3.0",

package/src/ChatPanel.css

@@ -165,6 +165,22 @@
   background-color: #0056b3;
 }
 
+.side-panel table {
+  border-collapse: collapse;
+  margin-bottom: 1em; 
+  border: 1px solid #777;
+}
+
+.side-panel th {
+  border: 1px solid #777;
+  padding: 8px;
+}
+
+.side-panel td {
+  border: 1px solid #777;
+  padding: 8px;
+}
+
 .side-panel-dark {
   font-family: "Roboto", Arial, Helvetica, sans-serif;
   font-size: small;
@@ -322,28 +338,18 @@
   background-color: #0056b3;
 }
 
-.chat-status {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px;
-  border-radius: 20px;
-  background-color: #f0f0f0;
+.side-panel-dark table {
+  border-collapse: collapse;
+  margin-bottom: 1em; 
+  border: 1px solid #ddd;
 }
 
-.loading-dots {
-  font-size: 20px;
-  animation: blink 1s linear infinite;
+.side-panel-dark th {
+  border: 1px solid #ddd;
+  padding: 8px;
 }
 
-@keyframes blink {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+.side-panel-dark td {
+  border: 1px solid #ddd;
+  padding: 8px;
 }

package/src/ChatPanel.tsx

@@ -2,7 +2,12 @@ import { LLMAsAServiceCustomer, useLLM } from "llmasaservice-client";
 import React, { useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import "./ChatPanel.css";
-import ChatStatus from "./ChatStatus";
+import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+  materialLight,
+  materialDark,
+} from "react-syntax-highlighter/dist/cjs/styles/prism";
 
 export interface ChatPanelProps {
   project_id: string;
@@ -23,7 +28,11 @@ export interface ChatPanelProps {
   scrollToEnd?: boolean;
 }
 
-const ChatPanel: React.FC<ChatPanelProps> = ({
+interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
+  inline?: boolean;
+}
+
+const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   project_id,
   initialPrompt = "",
   title = "Chat",
@@ -162,6 +171,63 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   };
 
+  const CodeBlock = ({ node, className, children, style, ...props }: any) => {
+    console.log("CodeBlock", className, children, style, props);
+    const match = /language-(\w+)/.exec(className || "");
+
+    return match ? (
+      <>
+        <div
+          style={{
+            border: 0,
+            padding: 0,
+            height: "16px",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <span>{match ? match[1] : "Unknown"}</span>
+          <button
+            onClick={() => copyToClipboard(children)}
+            className="copy-button"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 320 320"
+              fill="currentColor"
+              className="icon-svg"
+            >
+              <path
+                d="M35,270h45v45c0,8.284,6.716,15,15,15h200c8.284,0,15-6.716,15-15V75c0-8.284-6.716-15-15-15h-45V15
+		c0-8.284-6.716-15-15-15H35c-8.284,0-15,6.716-15,15v240C20,263.284,26.716,270,35,270z M280,300H110V90h170V300z M50,30h170v30H95
+		c-8.284,0-15,6.716-15,15v165H50V30z"
+              />
+              <path d="M155,120c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15s-6.716-15-15-15H155z" />
+              <path d="M235,180h-80c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15S243.284,180,235,180z" />
+              <path
+                d="M235,240h-80c-8.284,0-15,6.716-15,15c0,8.284,6.716,15,15,15h80c8.284,0,15-6.716,15-15C250,246.716,243.284,240,235,240z
+		"
+              />
+            </svg>
+          </button>
+        </div>
+        <SyntaxHighlighter
+          style={theme === "light" ? materialLight : materialDark}
+          PreTag="div"
+          language={match[1]}
+          {...props}
+        >
+          {String(children).replace(/\n$/, "")}
+        </SyntaxHighlighter>
+      </>
+    ) : (
+      <code className={className ? className : ""} {...props}>
+        {children}
+      </code>
+    );
+  };
+
   return (
     <>
       <div
@@ -173,7 +239,10 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
           {initialMessage && initialMessage !== "" ? (
             <div className="history-entry">
               <div className="response">
-                <ReactMarkdown className={markdownClass}>
+                <ReactMarkdown
+                  className={markdownClass}
+                  remarkPlugins={[remarkGfm]}
+                >
                   {initialMessage}
                 </ReactMarkdown>
               </div>
@@ -189,7 +258,11 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
                 {index === Object.keys(history).length - 1 && isLoading ? (
                   <div className="loading-text">loading...</div>
                 ) : null}
-                <ReactMarkdown className={markdownClass}>
+                <ReactMarkdown
+                  className={markdownClass}
+                  remarkPlugins={[remarkGfm]}
+                  components={{ code: CodeBlock }}
+                >
                   {response}
                 </ReactMarkdown>
                 <div className="button-container">