chatbot-frontend-package/README.md

AI chatbot frontend package of Offshorly

# Offshorly - AI Chatbot NPM Package

## Available Props

### Chatbot Component Props

- `filename` (required): The filename of the dataset used for the Chatbot.
- `dataset_id` (required): The ID of the dataset.
- `project_id` (required): The ID of the project.
- `customStyles` (optional): Takes in a file name to apply custom CSS styles for the chatbot Chat and Summary Component.
- `createQuickMessagesUrl` (optional): The URL for create quick messages endpoint, defaults to `backend-dataset-services` endpoint.

### Chat Component Props

- `createDatasetPromptUrl` (optional): The URL for create dataset prompts, endpoint, defaults to `backend-dataset-services` endpoint.
- `createDatasetStepsUrl` (optional): The URL for create dataset steps endpoint, defaults to `backend-dataset-services` endpoint.
- `clearConversationUrl` (optional): The URL for clear conversation history endpoint, defaults to `backend-dataset-services` endpoint.
- `audioToTextUrl` (optional): The URL for audio to text endpoint, defaults to `backend-dataset-services` endpoint.

### Summary Component Props

- `getSummaryUrl` (optional): The URL for get summary endpoint, defaults to `backend-dataset-services` endpoint.
- `createSummaryUrl` (optional): The URL for create summary endpoint, defaults to `backend-dataset-services` endpoint.

## Custom Styling
Custom styling may be applied to the Chat and Summary component by passing the filename of a JSON file in the `public` folder of your project to the `customStyles` prop of the Chatbot component.

Custom Styles JSON File Format - customize the HSL values in the `colors` class according to your preferred theme
```
{
  "classes": {
    "--background": "--background",
    "--foreground": "--foreground",

    "--primary": "-primary",
    "--primary-foreground": "--primary-foreground",

    "--secondary": "--secondary",
    "--secondary-foreground": "--secondary-foreground",

    "--muted": "--muted",
    "--muted-foreground": "--muted-foreground",

    "--accent": "--accent",
    "--accent-foreground": "--accent-foreground",
    
    "--destructive": "--destructive",
    "--destructive-foreground": "--destructive-foreground",

    "--border": "--border",
    "--input": "--input",
    "--ring": "--ring"

  },  

  "colors": {
      "--background": "222.2 84% 4.9%",
      "--foreground": "210 40% 98%",

      "--primary": "210 40% 98%",
	  "--primary-foreground": "222.2 47.4% 11.2%",

      "--secondary": "217.2 32.6% 17.5%",
	  "--secondary-foreground": "210 40% 98%",

      "--muted": "217.2 32.6% 17.5%",
      "--muted-foreground": "217.2 32.6% 17.5%",

      "--accent": "217.2 32.6% 17.5%",
	  "--accent-foreground": "210 40% 98%",
      
      "--destructive": "0 62.8% 30.6%",
	  "--destructive-foreground": "210 40% 98%",

      "--border": "217.2 32.6% 17.5%",
	  "--input": "217.2 32.6% 17.5%",
	  "--ring": "212.7 26.8% 83.9%"
    }
    
  }
  
```

## Sample Usage
```
import Chatbot from 'chatbot-frontend-package'
import 'chatbot-frontend-package/dist/chatbot-frontend-package.css';

<Chatbot 
	filename={filename}
	dataset_id={datasetId}
	project_id={projectId} 
	createQuickMessagesUrl={createQuickMessagesUrl}
	customStyles={'sample_theme.json'}
>
	<Chatbot.Chat 
		datasetName={datasetName}
		audioToTextUrl={audioToTextUrl}
		clearConversationUrl={clearConversationUrl}
		createDatasetPromptUrl={createDatasetPromptUrl}
		createDatasetStepsUrl={createDatasetStepsUrl}
	/>
</Chatbot>

<Chatbot 
	filename={filename}
	dataset_id={datasetId}
	project_id={projectId}
	createQuickMessagesUrl={createQuickMessagesUrl}
	customStyles={'sample_theme.json'}
>
	<Chatbot.Summary
		getSummaryUrl={getSummaryUrl}
		createSummaryUrl={createSummaryUrl} 
	/>
</Chatbot>
```
```
<Chatbot 
	filename={filename}
	dataset_id={datasetId}
	project_id={projectId}
>
	<Chatbot.Chat />
	<Chatbot.Summary />
</Chatbot>
```