llmasaservice-ui 0.1.3 → 0.1.5

package/dist/index.css

@@ -7,8 +7,6 @@
     sans-serif;
   font-size: small;
   color: #000;
-  width: 300px;
-  height: 100vh;
   background-color: #eee;
   display: flex;
   flex-direction: column;
@@ -40,9 +38,14 @@
   background-color: #007bff;
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 0.3rem;
   cursor: pointer;
   height: 30px;
+  width: 30px;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+  align-items: center;
 }
 .side-panel .send-button:hover {
   background-color: #0056b3;
@@ -87,6 +90,10 @@
   width: 18px;
   height: 18px;
 }
+.side-panel .icon-svg-large {
+  width: 24px;
+  height: 24px;
+}
 .side-panel .copy-button:hover {
   border: 1px solid #007bff;
   border-radius: 3px;
@@ -112,8 +119,6 @@
     sans-serif;
   font-size: small;
   color: #eee;
-  width: 300px;
-  height: 100vh;
   background-color: #424242;
   display: flex;
   flex-direction: column;
@@ -145,9 +150,14 @@
   background-color: #007bff;
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 0.3rem;
   cursor: pointer;
   height: 30px;
+  width: 30px;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+  align-items: center;
 }
 .side-panel-dark .send-button:hover {
   background-color: #0056b3;
@@ -192,6 +202,10 @@
   width: 18px;
   height: 18px;
 }
+.side-panel-dark .icon-svg-large {
+  width: 24px;
+  height: 24px;
+}
 .side-panel-dark .copy-button:hover {
   border: 1px solid #aaa;
   border-radius: 3px;

package/dist/index.d.mts

@@ -16,6 +16,8 @@ interface ChatPanelProps {
     thumbsDownClick?: () => void;
     theme?: "light" | "dark";
     markdownClass?: string;
+    width?: string;
+    height?: string;
 }
 declare const ChatPanel: React.FC<ChatPanelProps>;
 

package/dist/index.d.ts

@@ -16,6 +16,8 @@ interface ChatPanelProps {
     thumbsDownClick?: () => void;
     theme?: "light" | "dark";
     markdownClass?: string;
+    width?: string;
+    height?: string;
 }
 declare const ChatPanel: React.FC<ChatPanelProps>;
 

package/dist/index.js

@@ -66,7 +66,9 @@ var ChatPanel = ({
   thumbsUpClick,
   thumbsDownClick,
   theme = "light",
-  markdownClass = null
+  markdownClass = null,
+  width = "300px",
+  height = "100vh"
 }) => {
   const { send, response, idle, stop } = (0, import_llmasaservice_client.useLLM)({
     project_id,
@@ -132,7 +134,7 @@ var ChatPanel = ({
   function copyToClipboard(text) {
     navigator.clipboard.writeText(text);
   }
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "side-panel" + (theme === "light" ? "" : "-dark") }, /* @__PURE__ */ import_react.default.createElement("div", { className: "title" }, title), /* @__PURE__ */ import_react.default.createElement("div", { className: "responseArea" }, isLoading ? /* @__PURE__ */ import_react.default.createElement("div", { className: "loading-text" }, "loading...") : 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" }, /* @__PURE__ */ import_react.default.createElement(import_react_markdown.default, { className: markdownClass }, response2), /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { style: { width, height }, className: "side-panel" + (theme === "light" ? "" : "-dark") }, /* @__PURE__ */ import_react.default.createElement("div", { className: "title" }, title), /* @__PURE__ */ import_react.default.createElement("div", { className: "responseArea" }, isLoading ? /* @__PURE__ */ import_react.default.createElement("div", { className: "loading-text" }, "loading...") : 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" }, /* @__PURE__ */ import_react.default.createElement(import_react_markdown.default, { className: markdownClass }, response2), /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       className: "copy-button",
@@ -192,7 +194,33 @@ var ChatPanel = ({
         }
       }
     }
-  ), /* @__PURE__ */ import_react.default.createElement("button", { className: "send-button", onClick: continueChat }, idle ? "Send" : "Stop"))));
+  ), /* @__PURE__ */ import_react.default.createElement("button", { className: "send-button", onClick: continueChat }, idle ? /* @__PURE__ */ import_react.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      "stroke-width": "2",
+      stroke: "currentColor",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "icon-svg-large"
+    },
+    /* @__PURE__ */ import_react.default.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ import_react.default.createElement("path", { d: "M10 14l11 -11" }),
+    /* @__PURE__ */ import_react.default.createElement("path", { d: "M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5" })
+  ) : /* @__PURE__ */ import_react.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      "stroke-width": "1",
+      stroke: "currentColor",
+      fill: "currentColor",
+      className: "icon-svg-large"
+    },
+    /* @__PURE__ */ import_react.default.createElement("path", { d: "M8 8h16v16H8z" })
+  )))));
 };
 var ChatPanel_default = ChatPanel;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -33,7 +33,9 @@ var ChatPanel = ({
   thumbsUpClick,
   thumbsDownClick,
   theme = "light",
-  markdownClass = null
+  markdownClass = null,
+  width = "300px",
+  height = "100vh"
 }) => {
   const { send, response, idle, stop } = useLLM({
     project_id,
@@ -99,7 +101,7 @@ var ChatPanel = ({
   function copyToClipboard(text) {
     navigator.clipboard.writeText(text);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "side-panel" + (theme === "light" ? "" : "-dark") }, /* @__PURE__ */ React.createElement("div", { className: "title" }, title), /* @__PURE__ */ React.createElement("div", { className: "responseArea" }, isLoading ? /* @__PURE__ */ React.createElement("div", { className: "loading-text" }, "loading...") : 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" }, /* @__PURE__ */ React.createElement(ReactMarkdown, { className: markdownClass }, response2), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: { width, height }, className: "side-panel" + (theme === "light" ? "" : "-dark") }, /* @__PURE__ */ React.createElement("div", { className: "title" }, title), /* @__PURE__ */ React.createElement("div", { className: "responseArea" }, isLoading ? /* @__PURE__ */ React.createElement("div", { className: "loading-text" }, "loading...") : 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" }, /* @__PURE__ */ React.createElement(ReactMarkdown, { className: markdownClass }, response2), /* @__PURE__ */ React.createElement(
     "button",
     {
       className: "copy-button",
@@ -159,7 +161,33 @@ var ChatPanel = ({
         }
       }
     }
-  ), /* @__PURE__ */ React.createElement("button", { className: "send-button", onClick: continueChat }, idle ? "Send" : "Stop"))));
+  ), /* @__PURE__ */ React.createElement("button", { className: "send-button", onClick: continueChat }, idle ? /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      "stroke-width": "2",
+      stroke: "currentColor",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "icon-svg-large"
+    },
+    /* @__PURE__ */ React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M10 14l11 -11" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5" })
+  ) : /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      "stroke-width": "1",
+      stroke: "currentColor",
+      fill: "currentColor",
+      className: "icon-svg-large"
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "M8 8h16v16H8z" })
+  )))));
 };
 var ChatPanel_default = ChatPanel;
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "llmasaservice-ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/ChatPanel.css

@@ -3,8 +3,6 @@
   font-family: "Roboto", Arial, Helvetica, sans-serif;
   font-size: small;
   color: #000;
-  width: 300px;
-  height: 100vh;
   background-color: #eee;
   display: flex;
   flex-direction: column;
@@ -40,9 +38,14 @@
   background-color: #007bff;
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 0.3rem;
   cursor: pointer;
   height: 30px;
+  width: 30px;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+  align-items: center;
 }
 
 .side-panel .send-button:hover {
@@ -95,6 +98,12 @@
   height: 18px;
 }
 
+.side-panel .icon-svg-large {
+  width: 24px;
+  height: 24px;
+}
+
+
 .side-panel .copy-button:hover {
   border: 1px solid #007bff;
   border-radius: 3px;
@@ -121,8 +130,6 @@
   font-family: "Roboto", Arial, Helvetica, sans-serif;
   font-size: small;
   color: #eee;
-  width: 300px;
-  height: 100vh;
   background-color: #424242;
   display: flex;
   flex-direction: column;
@@ -157,9 +164,14 @@
   background-color: #007bff;
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 0.3rem;
   cursor: pointer;
   height: 30px;
+  width: 30px;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+  align-items: center;
 }
 
 .side-panel-dark .send-button:hover {
@@ -212,6 +224,12 @@
   height: 18px;
 }
 
+.side-panel-dark .icon-svg-large {
+  width: 24px;
+  height: 24px;
+}
+
+
 .side-panel-dark .copy-button:hover {
   border: 1px solid #aaa;
   border-radius: 3px;

package/src/ChatPanel.tsx

@@ -15,6 +15,8 @@ export interface ChatPanelProps {
   thumbsDownClick?: () => void;
   theme?: "light" | "dark";
   markdownClass?: string;
+  width?: string;
+  height?: string;
 }
 
 const ChatPanel: React.FC<ChatPanelProps> = ({
@@ -29,6 +31,8 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
   thumbsDownClick,
   theme = "light",
   markdownClass = null,
+  width = "300px",
+  height = "100vh",
 }) => {
   const { send, response, idle, stop } = useLLM({
     project_id: project_id,
@@ -116,7 +120,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
 
   return (
     <>
-      <div className={"side-panel" + (theme === "light" ? "" : "-dark")}>
+      <div style={{width: width, height: height}} className={"side-panel" + (theme === "light" ? "" : "-dark")}>
         <div className="title">{title}</div>
         <div className="responseArea">
           {isLoading ? <div className="loading-text">loading...</div> : null}
@@ -197,7 +201,33 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
             }}
           ></textarea>
           <button className="send-button" onClick={continueChat}>
-            {idle ? "Send" : "Stop"}
+            {idle ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                fill="none"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="icon-svg-large"
+              >
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M10 14l11 -11"></path>
+                <path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"></path>
+              </svg>
+            ) : (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                stroke-width="1"
+                stroke="currentColor"
+                fill="currentColor"
+                className="icon-svg-large"
+              >
+                <path d="M8 8h16v16H8z" />
+              </svg>
+            )}
           </button>
         </div>
       </div>

package/src/stories/ChatPanel.stories.ts

@@ -23,6 +23,8 @@ export const ChatPanelStory: Story = {
     placeholder: "Type a message",
     theme: "light",
     messages: [],
+    width:"300px",
+    height:"100vh",
   },
 };
 
@@ -36,6 +38,8 @@ export const ChatPanelThumbsStory: Story = {
     theme: "dark",
     thumbsUpClick: () => alert("Thumbs up clicked"),
     thumbsDownClick: () => alert("Thumbs down clicked"),
+    width:"300px",
+    height:"100vh",
   },
 };
 
@@ -55,5 +59,22 @@ export const ChatPanelSystemInstructionStory: Story = {
         content: "Give all responses like a pirate",
       },
     ],
+    width:"300px",
+    height:"100vh",
+  },
+};
+
+export const ChatPanelHorizontalThumbsStory: Story = {
+  args: {
+    title: "Chat",
+    project_id: "[get this from your  control panel]",
+    initialPrompt: "Hi",
+    hideInitialPrompt: true,
+    placeholder: "Type a message",
+    theme: "dark",
+    thumbsUpClick: () => alert("Thumbs up clicked"),
+    thumbsDownClick: () => alert("Thumbs down clicked"),
+    width:"800px",
+    height:"400px",
   },
 };