llmasaservice-ui 0.1.4 → 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;
@@ -43,7 +41,7 @@
   border-radius: 0.3rem;
   cursor: pointer;
   height: 30px;
-  width: 40px;
+  width: 30px;
   padding: 0;
   margin: 0;
   justify-content: center;
@@ -92,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;
@@ -117,8 +119,6 @@
     sans-serif;
   font-size: small;
   color: #eee;
-  width: 300px;
-  height: 100vh;
   background-color: #424242;
   display: flex;
   flex-direction: column;
@@ -153,7 +153,11 @@
   border-radius: 0.3rem;
   cursor: pointer;
   height: 30px;
-  width: 40px;
+  width: 30px;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+  align-items: center;
 }
 .side-panel-dark .send-button:hover {
   background-color: #0056b3;
@@ -198,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",
@@ -200,9 +202,9 @@ var ChatPanel = ({
       "stroke-width": "2",
       stroke: "currentColor",
       fill: "none",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      className: "icon-svg"
+      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" }),
@@ -215,7 +217,7 @@ var ChatPanel = ({
       "stroke-width": "1",
       stroke: "currentColor",
       fill: "currentColor",
-      className: "icon-svg"
+      className: "icon-svg-large"
     },
     /* @__PURE__ */ import_react.default.createElement("path", { d: "M8 8h16v16H8z" })
   )))));

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",
@@ -167,9 +169,9 @@ var ChatPanel = ({
       "stroke-width": "2",
       stroke: "currentColor",
       fill: "none",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      className: "icon-svg"
+      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" }),
@@ -182,7 +184,7 @@ var ChatPanel = ({
       "stroke-width": "1",
       stroke: "currentColor",
       fill: "currentColor",
-      className: "icon-svg"
+      className: "icon-svg-large"
     },
     /* @__PURE__ */ React.createElement("path", { d: "M8 8h16v16H8z" })
   )))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "llmasaservice-ui",
-  "version": "0.1.4",
+  "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;
@@ -43,7 +41,7 @@
   border-radius: 0.3rem;
   cursor: pointer;
   height: 30px;
-  width: 40px;
+  width: 30px;
   padding: 0;
   margin: 0;
   justify-content: center;
@@ -100,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;
@@ -126,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;
@@ -165,7 +167,11 @@
   border-radius: 0.3rem;
   cursor: pointer;
   height: 30px;
-  width: 40px;
+  width: 30px;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+  align-items: center;
 }
 
 .side-panel-dark .send-button:hover {
@@ -218,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}
@@ -204,9 +208,9 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
                 stroke-width="2"
                 stroke="currentColor"
                 fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                className="icon-svg"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="icon-svg-large"
               >
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M10 14l11 -11"></path>
@@ -219,7 +223,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
                 stroke-width="1"
                 stroke="currentColor"
                 fill="currentColor"
-                className="icon-svg"
+                className="icon-svg-large"
               >
                 <path d="M8 8h16v16H8z" />
               </svg>

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",
   },
 };