llmasaservice-ui 0.2.4 → 0.2.5

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

@@ -55,6 +55,7 @@ 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 ChatPanel = ({
   project_id,
   initialPrompt = "",
@@ -174,7 +175,7 @@ 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] }, response2), /* @__PURE__ */ import_react.default.createElement("div", { className: "button-container" }, /* @__PURE__ */ import_react.default.createElement(
       "button",
       {
         className: "copy-button",

package/dist/index.mjs

@@ -22,6 +22,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { useLLM } from "llmasaservice-client";
 import React, { useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 var ChatPanel = ({
   project_id,
   initialPrompt = "",
@@ -141,7 +142,7 @@ 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] }, 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.5",
   "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,8 @@
   ],
   "dependencies": {
     "llmasaservice-client": "^0.4.0",
-    "react-markdown": "^9.0.1"
+    "react-markdown": "^9.0.1",
+    "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,7 @@ 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";
 
 export interface ChatPanelProps {
   project_id: string;
@@ -23,7 +23,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",
@@ -173,7 +177,7 @@ 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 +193,7 @@ 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]} >
                   {response}
                 </ReactMarkdown>
                 <div className="button-container">