llmasaservice-ui 0.1.6 → 0.1.8

package/.github/workflows/deploy-github-pages.yml

@@ -0,0 +1,37 @@
+# .github/workflows/deploy-github-pages.yaml
+ 
+# Workflow name
+name: Build and Publish Storybook to GitHub Pages
+ 
+on:
+  # Event for the workflow to run on
+  push:
+    branches:
+      - 'main' # Replace with the branch you want to deploy from
+ 
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+ 
+# List of jobs
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      # Manual Checkout
+      - uses: actions/checkout@v4
+ 
+      # Set up Node
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+ 
+      #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
+      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+        with:
+          install_command: yarn install # default: npm ci
+          build_command: yarn build-storybook # default: npm run build-storybook
+          path: storybook-static # default: dist/storybook
+          checkout: false # default: true

package/README.md

@@ -1,2 +1,141 @@
 # Prebuilt UI chat panel for LLM as a Service
 
+LLMAsAService.io is a platform to accelerate and securely develop LLM features in your applications and websites.
+
+This library offers a pre-built panel for incorporating chat GPT style features in react/nextjs applications.
+
+Features
+- Multi-turn style chat interface
+- Open with an initial prompt (for example, after a click on a Summarize button in your application, set the initialPrompt to "Summarize the following text ..." and the panel will automatically show the summary)
+- Light and dark theme
+- Abort functionality
+- Markdown response display
+- Sizable vertically and horizontally to suit your app. use 100vh or 100vw for the height and width to full size the panel in that orientation.
+
+
+What is LLM as a Service: https://llmasaservice.io
+
+Register for a LLM as a Service account and get your unique project id from the integration page https://app.llmasaservice.io/integration
+
+
+## Installation
+
+To install the library, use npm or yarn:
+
+```bash
+# Using npm
+npm install llmasaservice-ui
+
+# Using yarn
+yarn add llmasaservice-ui
+```
+
+## Usage
+
+In a React application
+
+1. Import the ChatPanel component
+
+```typescript
+import React from 'react';
+import ChatPanel from 'llmasaservice-ui';
+import "../../node_modules/llmasaservice-ui/dist/index.css"; // default styles for light and dark, or replace with your own
+
+const App = () => {
+  return (
+    <div>
+      <h1>My Chat Application</h1>
+      <ChatPanel 
+        project_id="[[get this from the LLMAsAService control panel]]"
+        initialPrompt="Give a nice welcome message"
+      />
+    </div>
+  );
+};
+
+export default App;
+```
+2. Run your application
+
+```bash
+npm start
+```
+
+In a Next.js application
+
+1. Create a new page in pages/chat.js and add the following code
+
+```javascript
+import React from 'react';
+import ChatPanel from 'llmasaservice-ui';
+import "../../node_modules/llmasaservice-ui/dist/index.css"; // default styles for light and dark, or replace with your own
+
+const ChatPage = () => {
+  return (
+    <div>
+      <h1>Chat Page</h1>
+      <ChatPanel 
+       project_id="[[your project_id from the llmasaservice control panel]]"
+        title="Chat with us"
+        initialPrompt="Write a short three sentence background on the city called: Seattle"
+        />
+    </div>
+  );
+};
+
+export default ChatPage;
+```
+
+
+2. Run Your Next.js Application:
+
+```bash
+npm run dev
+```
+
+## Tailwind CSS support
+
+If you use tailwind for CSS styling do these additional steps for proper markdown formatting -
+
+a) install the Typography: 
+
+```bash
+npm install -D @tailwindcss/typography 
+```
+
+b) add the plugin to your tailwind.config.js file:
+
+```javascript
+module.exports = {
+  theme: {
+    // ...
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+    // ...
+  ],
+}
+```
+
+c) use prose as the class for the markdownStyle. This example is for dark mode
+
+```javascript
+ <ChatPanel
+        project_id="[[your project_id from the llmasaservice control panel]]"
+        title="Chat with us"
+        initialPrompt="Write a short three sentence background on the city called: Seattle"
+        theme="dark"
+        markdownClass="prose prose-sm !max-w-none dark:prose-invert"
+      />
+```
+
+## Customization
+You can customize the chat panel by passing props to the ChatPanel component. Refer to the library documentation for more details on available props and customization options.
+
+See our storybook documentation showing how to theme, size and use the variaous features in this component:
+
+https://predictabilityatscale.github.io/llmasaservice-ui/?path=/docs/chatpanel--docs
+
+
+## License
+This project is licensed under the MIT License.

package/dist/index.js

@@ -199,7 +199,7 @@ var ChatPanel = ({
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
-      "stroke-width": "2",
+      strokeWidth: "2",
       stroke: "currentColor",
       fill: "none",
       strokeLinecap: "round",
@@ -214,7 +214,7 @@ var ChatPanel = ({
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
-      "stroke-width": "1",
+      strokeWidth: "1",
       stroke: "currentColor",
       fill: "currentColor",
       className: "icon-svg-large"

package/dist/index.mjs

@@ -166,7 +166,7 @@ var ChatPanel = ({
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
-      "stroke-width": "2",
+      strokeWidth: "2",
       stroke: "currentColor",
       fill: "none",
       strokeLinecap: "round",
@@ -181,7 +181,7 @@ var ChatPanel = ({
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
-      "stroke-width": "1",
+      strokeWidth: "1",
       stroke: "currentColor",
       fill: "currentColor",
       className: "icon-svg-large"

package/package.json

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

package/src/ChatPanel.tsx

@@ -205,7 +205,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
-                stroke-width="2"
+                strokeWidth="2"
                 stroke="currentColor"
                 fill="none"
                 strokeLinecap="round"
@@ -220,7 +220,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
-                stroke-width="1"
+                strokeWidth="1"
                 stroke="currentColor"
                 fill="currentColor"
                 className="icon-svg-large"