@hef2024/llmasaservice-ui 0.16.8

package/README.md

@@ -0,0 +1,162 @@
+# 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)
+- New Conversation button to reset chat history while preserving customer information
+- 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
+
+Dark mode example:
+
+![Dark Mode](images/darkmode.png)
+
+Light mode example:
+
+![Light Mode](images/lightmode.png)
+
+System instructios example:
+
+![Brand and personality](images/personalityandbrand.png)
+
+see documentation more examples: https://predictabilityatscale.github.io/llmasaservice-ui/?path=/docs/chatpanel--docs
+
+## 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.
+
+### Button Controls
+- `showSaveButton`: Show/hide the save conversation button (default: true)
+- `showEmailButton`: Show/hide the email conversation button (default: true)  
+- `showNewConversationButton`: Show/hide the new conversation button (default: true)
+
+The New Conversation button resets the chat history and state while preserving customer email and identification information. It requires two clicks for confirmation to prevent accidental resets - the first click changes the button to "Click to Confirm" and the second click performs the reset.
+
+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.