@offshorly/chatbot-frontend-package

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>