add fontSize and chatConfig

vexersa · Jun 17, 2023 · f8ba7c0 · f8ba7c0
1 parent 8b60ab4
commit f8ba7c0
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -46,6 +46,9 @@ You can also customize chatbot with different configuration
   Chatbot.init({
     chatflowid: "91e9c803-5169-4db9-8207-3c0915d71c5f",
     apiHost: "http://localhost:3000",
+    chatflowConfig: {
+      // topK: 2
+    },
     theme: {
       button: {
         backgroundColor: "#3B81F6",
@@ -61,6 +64,7 @@ You can also customize chatbot with different configuration
         backgroundColor: "#ffffff",
         height: 700,
         width: 400,
+        fontSize: 16,
         poweredByTextColor: "#303235",
         botMessage: {
           backgroundColor: "#f7f8ff",

diff --git a/src/components/Bot.tsx b/src/components/Bot.tsx
@@ -1,5 +1,5 @@
 import { createSignal, createEffect, For, onMount } from 'solid-js'
-import { sendMessageQuery, isStreamAvailableQuery } from '@/queries/sendMessageQuery'
+import { sendMessageQuery, isStreamAvailableQuery, IncomingInput } from '@/queries/sendMessageQuery'
 import { TextInput } from './inputs/textInput'
 import { GuestBubble } from './bubbles/GuestBubble'
 import { BotBubble } from './bubbles/BotBubble'
@@ -21,12 +21,14 @@ export type MessageType = {
 export type BotProps = {
     chatflowid: string
     apiHost?: string
+    chatflowConfig?: Record<string, unknown>
     welcomeMessage?: string
     botMessage?: BotMessageTheme
     userMessage?: UserMessageTheme
     textInput?: TextInputTheme
     poweredByTextColor?: string
     badgeBackgroundColor?: string
+    fontSize?: number
 }
 
 const defaultWelcomeMessage = 'Hi there! How can I help?'
@@ -184,11 +186,13 @@ export const Bot = (props: BotProps & { class?: string }) => {
         scrollToBottom()
 
         // Send user question and history to API
-        const body: any = {
+        const body: IncomingInput = {
             question: value,
             history: messages().filter((msg) => msg.message !== props.welcomeMessage ?? defaultWelcomeMessage)
         }
 
+        if (props.chatflowConfig) body.overrideConfig = props.chatflowConfig
+
         if (isChatFlowAvailableToStream()) body.socketIOClientId = socketIOClientId()
 
         const { data, error } = await sendMessageQuery({
@@ -226,6 +230,10 @@ export const Bot = (props: BotProps & { class?: string }) => {
         if (messages()) scrollToBottom()
     })
 
+    createEffect(() => {
+        if (props.fontSize && botContainer) botContainer.style.fontSize = `${props.fontSize}px`
+    })
+
     // eslint-disable-next-line solid/reactivity
     createEffect(async() => {
         const { data } = await isStreamAvailableQuery({
@@ -321,6 +329,7 @@ export const Bot = (props: BotProps & { class?: string }) => {
                         textColor={props.textInput?.textColor}
                         placeholder={props.textInput?.placeholder}
                         sendButtonColor={props.textInput?.sendButtonColor}
+                        fontSize={props.fontSize}
                         defaultValue={userInput()}
                         onSubmit={handleSubmit}
                     />

diff --git a/src/components/inputs/textInput/components/ShortTextInput.tsx b/src/components/inputs/textInput/components/ShortTextInput.tsx
@@ -4,6 +4,7 @@ import { JSX } from 'solid-js/jsx-runtime'
 type ShortTextInputProps = {
     ref: HTMLInputElement | undefined
     onInput: (value: string) => void
+    fontSize?: number
 } & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'onInput'>
 
 export const ShortTextInput = (props: ShortTextInputProps) => {
@@ -14,7 +15,7 @@ export const ShortTextInput = (props: ShortTextInputProps) => {
             ref={props.ref}
             class='focus:outline-none bg-transparent px-4 py-4 flex-1 w-full text-input'
             type='text'
-            style={{ 'font-size': '16px' }}
+            style={{ 'font-size': props.fontSize ? `${props.fontSize}px` : '16px' }}
             onInput={(e) => local.onInput(e.currentTarget.value)}
             {...others}
         />

diff --git a/src/components/inputs/textInput/components/TextInput.tsx b/src/components/inputs/textInput/components/TextInput.tsx
@@ -9,6 +9,7 @@ type Props = {
     textColor?: string
     sendButtonColor?: string
     defaultValue?: string
+    fontSize?: number
     onSubmit: (value: string) => void
 }
 
@@ -56,6 +57,7 @@ export const TextInput = (props: Props) => {
                 ref={inputRef as HTMLInputElement}
                 onInput={handleInput}
                 value={inputValue()}
+                fontSize={props.fontSize}
                 placeholder={props.placeholder ?? 'Type your question'}
             />
             <SendButton sendButtonColor={props.sendButtonColor} type='button' isDisabled={inputValue() === ''} class='my-2 ml-2' on:click={submit}>

diff --git a/src/constants.ts b/src/constants.ts
@@ -3,5 +3,6 @@ import type { BubbleProps } from './features/bubble'
 export const defaultBotProps: BubbleProps = {
     chatflowid: '',
     apiHost: undefined,
+    chatflowConfig: undefined,
     theme: undefined
 }
diff --git a/src/features/bubble/components/Bubble.tsx b/src/features/bubble/components/Bubble.tsx
@@ -69,7 +69,9 @@ export const Bubble = (props: BubbleProps) => {
                         textInput={bubbleProps.theme?.chatWindow?.textInput}
                         botMessage={bubbleProps.theme?.chatWindow?.botMessage}
                         userMessage={bubbleProps.theme?.chatWindow?.userMessage}
+                        fontSize={bubbleProps.theme?.chatWindow?.fontSize}
                         chatflowid={props.chatflowid}
+                        chatflowConfig={props.chatflowConfig}
                         apiHost={props.apiHost} />
                 </Show>
             </div>

diff --git a/src/features/bubble/types.ts b/src/features/bubble/types.ts
@@ -33,6 +33,7 @@ export type ChatWindowTheme = {
     backgroundColor?: string
     height?: number
     width?: number
+    fontSize?: number
     userMessage?: UserMessageTheme
     botMessage?: BotMessageTheme
     textInput?: TextInputTheme

diff --git a/src/queries/sendMessageQuery.ts b/src/queries/sendMessageQuery.ts
@@ -1,9 +1,17 @@
+import { MessageType } from '@/components/Bot'
 import { sendRequest } from '@/utils/index'
 
+export type IncomingInput = {
+    question: string
+    history: MessageType[]
+    overrideConfig?: Record<string, unknown>
+    socketIOClientId?: string
+}
+
 export type MessageRequest = {
     chatflowid: string
     apiHost?: string
-    body?: any
+    body?: IncomingInput
 }
 
 export const sendMessageQuery = ({ chatflowid, apiHost = 'http://localhost:3000', body }: MessageRequest) =>

diff --git a/src/window.ts b/src/window.ts
@@ -2,6 +2,7 @@
 type BotProps = {
     chatflowid: string
     apiHost?: string
+    chatflowConfig?: Record<string, unknown>
 }
 
 export const init = (props: BotProps) => {