llmasaservice-ui 0.0.1 → 0.1.1

package/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -0,0 +1,2 @@
+# Prebuilt UI chat panel for LLM as a Service
+

package/dist/index.css

@@ -0,0 +1,203 @@
+/* src/ChatPanel.css */
+.side-panel {
+  font-family:
+    "Roboto",
+    Arial,
+    Helvetica,
+    sans-serif;
+  font-size: small;
+  color: #000;
+  width: 300px;
+  height: 100vh;
+  background-color: #eee;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px;
+  box-shadow: 5px 0 5px rgba(0, 0, 0, 0.1);
+}
+.side-panel .title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  text-align: center;
+}
+.side-panel .input-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 5px;
+}
+.side-panel textarea {
+  flex: 1;
+  padding: 10px;
+  margin-right: 10px;
+  border-radius: 4px;
+  height: 50px;
+  resize: none;
+}
+.side-panel .send-button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  height: 30px;
+}
+.side-panel .send-button:hover {
+  background-color: #0056b3;
+}
+.side-panel .history-entry {
+  background-color: #eee;
+}
+.side-panel .responseArea {
+  flex: 1;
+  background-color: eee;
+  border-radius: 4px;
+  overflow-y: auto;
+}
+.side-panel .prompt {
+  align-self: flex-start;
+  background-color: #bbb;
+  padding: 5px;
+  border-radius: 10px;
+  margin-right: 4%;
+  margin-bottom: 3px;
+  max-width: 96%;
+}
+.side-panel .response {
+  align-self: flex-end;
+  background-color: #ddd;
+  padding: 5px;
+  border-radius: 10px;
+  margin-left: 4%;
+  max-width: 99%;
+  margin-bottom: 5px;
+}
+.side-panel .copy-button {
+  font-size: 10px;
+  border: 0px solid #007bff;
+  background-color: transparent;
+  color: #007bff;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+}
+.side-panel .copy-button:hover {
+  border: 1px solid #007bff;
+  border-radius: 3px;
+}
+.side-panel .thumbs-button {
+  font-size: 10px;
+  border: 0px solid #007bff;
+  background-color: transparent;
+  color: #007bff;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+}
+.side-panel .thumbs-button:hover {
+  border: 1px solid #007bff;
+  border-radius: 3px;
+}
+.side-panel-dark {
+  font-family:
+    "Roboto",
+    Arial,
+    Helvetica,
+    sans-serif;
+  font-size: small;
+  color: #eee;
+  width: 300px;
+  height: 100vh;
+  background-color: #424242;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px;
+  box-shadow: 5px 0 5px rgba(0, 0, 0, 0.1);
+}
+.side-panel-dark .title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  text-align: center;
+}
+.side-panel-dark .input-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 5px;
+}
+.side-panel-dark textarea {
+  flex: 1;
+  padding: 10px;
+  margin-right: 10px;
+  border-radius: 4px;
+  height: 50px;
+  resize: none;
+}
+.side-panel-dark .send-button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  height: 30px;
+}
+.side-panel-dark .send-button:hover {
+  background-color: #0056b3;
+}
+.side-panel-dark .history-entry {
+  background-color: #424242;
+}
+.side-panel-dark .responseArea {
+  flex: 1;
+  background-color: #424242;
+  border-radius: 4px;
+  overflow-y: auto;
+}
+.side-panel-dark .prompt {
+  align-self: flex-start;
+  background-color: #303030;
+  padding: 5px;
+  border-radius: 10px;
+  margin-right: 4%;
+  margin-bottom: 3px;
+  max-width: 96%;
+}
+.side-panel-dark .response {
+  align-self: flex-end;
+  background-color: #303030;
+  padding: 5px;
+  border-radius: 10px;
+  margin-left: 4%;
+  max-width: 96%;
+  margin-bottom: 5px;
+}
+.side-panel-dark .copy-button {
+  font-size: 10px;
+  border: 0px solid #aaa;
+  background-color: transparent;
+  color: #aaa;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+}
+.side-panel-dark .copy-button:hover {
+  border: 1px solid #aaa;
+  border-radius: 3px;
+}
+.side-panel-dark .thumbs-button {
+  font-size: 10px;
+  border: 0px solid #aaa;
+  background-color: transparent;
+  color: #aaa;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+}
+.side-panel-dark .thumbs-button:hover {
+  border: 1px solid #aaa;
+  border-radius: 3px;
+}

package/dist/index.d.mts

@@ -1,7 +1,21 @@
+import { LLMAsAServiceCustomer } from 'llmasaservice-client';
 import React from 'react';
 
 interface ChatPanelProps {
+    project_id: string;
+    initialPrompt: string;
+    title?: string;
+    placeholder?: string;
+    hideInitialPrompt?: boolean;
+    customer?: LLMAsAServiceCustomer;
+    messages?: {
+        role: "user" | "assistant";
+        content: string;
+    }[];
+    thumbsUpClick?: () => void;
+    thumbsDownClick?: () => void;
+    theme?: "light" | "dark";
 }
 declare const ChatPanel: React.FC<ChatPanelProps>;
 
-export { ChatPanel };
+export { ChatPanel, type ChatPanelProps };

package/dist/index.d.ts

@@ -1,7 +1,21 @@
+import { LLMAsAServiceCustomer } from 'llmasaservice-client';
 import React from 'react';
 
 interface ChatPanelProps {
+    project_id: string;
+    initialPrompt: string;
+    title?: string;
+    placeholder?: string;
+    hideInitialPrompt?: boolean;
+    customer?: LLMAsAServiceCustomer;
+    messages?: {
+        role: "user" | "assistant";
+        content: string;
+    }[];
+    thumbsUpClick?: () => void;
+    thumbsDownClick?: () => void;
+    theme?: "light" | "dark";
 }
 declare const ChatPanel: React.FC<ChatPanelProps>;
 
-export { ChatPanel };
+export { ChatPanel, type ChatPanelProps };