bibot 1.0.5 → 1.0.6

package/src/component/bibot.tsx

@@ -0,0 +1,103 @@
+import { Avatar, Indicator } from '@mantine/core'
+import { Close, SendRounded } from '@mui/icons-material'
+import ChatIcon from '@mui/icons-material/Chat'
+import { Button } from 'antd'
+import { useBiBotChatBot } from '../hooks'
+import { AppProvider } from '../context/AppContext'
+interface bubbleProps {
+  clientId: string
+}
+
+interface PredefinedQuestionsProps {
+  onSelect: (question: string) => void
+  questions: string[]
+}
+
+const PredefinedQuestions = ({ questions, onSelect }: PredefinedQuestionsProps) => {
+  return (
+    <div className="predefined-questions">
+      {questions.map((question, index) => (
+        <div key={index} className="predefined-question" onClick={() => onSelect(question)}>
+          {question}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const BiBot = ({ clientId }: bubbleProps) => {
+  const {
+    chatIsOpen,
+    messages,
+    isLoading,
+    messageEndRef,
+    userInput,
+    handleUserInput,
+    handleKeyPress,
+    sendInputInquiry,
+    toggleChat,
+    chatBubbleConfig,
+    showPredefinedQuestions,
+    predefinedQuestions,
+    handlePredefinedQuestionSelect,
+  } = useBiBotChatBot({clientId})
+
+  return (
+    <AppProvider>
+    <div className={`chat-bubble ${chatIsOpen ? 'open' : ''}`}>
+      {chatIsOpen && (
+        <div className="chat-window" style={{ backgroundColor: chatBubbleConfig?.bgColor }}>
+          <div className="chat-header" style={{ backgroundColor: chatBubbleConfig?.color ?? '#dedede' }}>
+            <div style={{ alignItems: 'center', display: 'flex', color: '#fff', fontWeight: 'bold' }}>
+            <Indicator inline size={12} offset={7} position="bottom-end" color={ 'green' }>
+            <Avatar color="white" src={chatBubbleConfig?.logo_url} alt="profile" />
+              </Indicator>
+               </div>
+               <div style={{ display: 'flex', flexDirection: 'column', textAlign: 'left', paddingLeft: '10px', justifyContent: 'flex-start', color: '#fff' }}>
+                  <span style={{ fontWeight: 'bold' }}>{chatBubbleConfig?.title}</span>
+                {}
+              {isLoading ? <span style={{ fontSize: '12px', lineHeight: '0.5' }}>Typing...</span> : <span style={{ fontSize: '12px', lineHeight: '0.5' }}>{'Online'}</span>}
+                </div>
+            </div>
+          <div className="message-list">
+            {messages.map((message: { sender: 'user' | 'bot', text: string }, index: number) => (
+              message.sender === 'user'
+                ? <div key={index} className={`message ${message.sender}`}>
+                {message.text}
+              </div>
+                : <div key={index} style={{ display: 'flex' }}>
+              <Avatar color="white" src={chatBubbleConfig?.logo_url} size={25} alt="profile" />
+              <div className={`message ${message.sender}`}>
+              {message.text}
+              </div>
+              </div>
+            ))}
+                       {showPredefinedQuestions && predefinedQuestions && predefinedQuestions.length > 0 && (
+              <PredefinedQuestions questions={predefinedQuestions} onSelect={handlePredefinedQuestionSelect} />
+            )}
+            {isLoading &&  <div style={{marginLeft: '20px'}} className='message'> <div className="loader"></div>  </div> }
+            <div ref={messageEndRef} />
+          </div>
+          <div className="input-area">
+            <input
+              autoFocus={true}
+              type="text"
+              value={userInput}
+              onChange={handleUserInput}
+              onKeyPress={handleKeyPress}
+              placeholder="Ask a question"
+            />
+            <Button disabled={isLoading ?? true} style={{ backgroundColor: 'transparent', color: isLoading ? '#dedede' : chatBubbleConfig?.color }} size='middle' icon={<SendRounded />} onClick={sendInputInquiry}/>
+          </div>
+        </div>
+      )}
+      <Button type='link' onClick={toggleChat} className="chat-toggle" style={{ backgroundColor: chatBubbleConfig?.color ?? '#dedede' }}>
+        {chatIsOpen ? <Close style={{ width: 30, height: 30, color: '#fff' }} /> : <ChatIcon style={{ width: 30, height: 30, color: '#fff' }}/>}
+      </Button>
+    </div>
+    </AppProvider>
+
+  )
+}
+
+export default BiBot

package/src/config/appStateEnums.ts

@@ -0,0 +1,3 @@
+export enum appStateEnums {
+  BIBOT = 'BIBOT'
+}

package/src/config/endpointEnums.ts

@@ -0,0 +1,28 @@
+
+export const APP_DATA = {
+  APP_NAME: 'Bibot'
+}
+
+const baseUrls = {
+  inference: 'https://inference.dev.bibot.thespuka.com/v0',
+}
+
+export const endpoints = {
+  get inference () {
+    return baseUrls.inference
+  },
+} as const
+
+export enum domain {
+  app = '/app',
+  bibot = '/bibot',
+  inference = '/inference',
+}
+
+export enum resources {
+  chatBubble = '/chat-bubble-config',
+  predefinedQ = '/predefined-q',
+  localQ = '/local-q',
+  timedOutLocalQ = '/t-local-q',
+  q = '/q'
+}

package/src/config/index.ts

@@ -0,0 +1,5 @@
+// created from 'create-ts-index'
+export * from './appStateEnums'
+export * from './endpointEnums'
+export * from './statusCode'
+

package/src/config/statusCode.ts

@@ -0,0 +1,49 @@
+export enum statusCode {
+  ok = 200
+  , created = 201
+  , accepted = 202
+
+  // 3xx codes
+  , unmodified = 304
+
+  // 4xx Client Error
+  , sucMsg = 'success'
+  , badReq = 400
+  , unauthorized = 401
+  , paymentReq = 402
+  , forbidden = 403
+  , notFound = 404
+  , methodNotAllowed = 405
+  , notAcceptable = 406
+  , pxyAuthReq = 407
+  , reqTimeOut = 408
+  , conflict = 409
+  , gone = 410
+  , lengthReq = 411
+  , preConFailed = 412
+  , payloadTooLarge = 413
+  , urlTooLong = 414
+  , unsupportedMediaType = 415
+  , rangeNotSatisfiable = 416
+  , expectationFailed = 417
+
+  , misdirectedReq = 421
+  , unprocessableEntity = 422
+  , locked = 423
+  , failedDependency = 424
+  , tooLarge = 425
+  , upgradeRequired = 426
+  , preconReq = 428
+  , tooManyReq = 429
+  , reqHeaderTooLarge = 431
+  , unavailableForLegalReasons = 451
+
+  // 5xx Server Error
+  , internalServerError = 500
+  , notImplemented = 501
+  , badGateway = 502
+  , svcUnavalable = 503
+  , gtwayTimeout = 504
+  , httpVNotSupported = 505
+  , networkAuthReq = 511
+}

package/src/context/AppContext.tsx

@@ -0,0 +1,66 @@
+import { appStateEnums } from '../config/appStateEnums'
+import React, { type ReactNode, createContext, useReducer, useEffect } from 'react'
+import { appReducer } from '../reducers/appReducer'
+import type { AppContextProps, AppStates } from '../types/coreInterfaces'
+import { getSessionId } from '../utils/sessionManager'
+
+interface AppProps {
+  children: ReactNode
+}
+
+const dummyDispatch = () => {} // A no-op function.
+
+const defaultContextValue: AppContextProps = {
+  state: {
+    chatIsOpen: false,
+    sessionId: getSessionId()
+  },
+  dispatch: dummyDispatch
+}
+
+const AppContext = createContext<AppContextProps>(defaultContextValue)
+
+const AppProvider: React.FC<AppProps> = ({ children }) => {
+  const APP_STATE_KEY = 'app_states'
+  const initialState: AppStates = {
+    chatIsOpen: false,
+    sessionId: getSessionId()
+  }
+
+  const [state, dispatch] = useReducer(appReducer, initialState)
+
+  useEffect(() => {
+    // Pool the initial states from local storage
+    const storedStates = localStorage.getItem(APP_STATE_KEY)
+
+    if (storedStates) {
+      try {
+        const parsedStates = JSON.parse(storedStates)
+
+        // Merge stored states with initial states
+        const updatedStates = {
+          ...initialState,
+          ...parsedStates
+        }
+        console.log(initialState, parsedStates, updatedStates)
+        // Dispatch action to update the states
+        dispatch({ type: appStateEnums.BIBOT, ...updatedStates })
+      } catch (error) {
+        console.error('Failed to parse app states from local storage:', error)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    console.log('Changes in state: ', state)
+    localStorage.setItem(APP_STATE_KEY, JSON.stringify(state))
+  }, [state])
+
+  return (
+    <AppContext.Provider value={{ state, dispatch }}>
+      {children}
+    </AppContext.Provider>
+  )
+}
+
+export { AppContext, AppProvider }

package/src/context/index.ts

@@ -0,0 +1,3 @@
+// created from 'create-ts-index'
+
+export * from './AppContext'

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+// created from 'create-ts-index'
+
+export * from './usePluginFactory'
+export * from './useBiBotChatBot'
+export * from './mobileView'

package/src/hooks/mobileView.tsx

@@ -0,0 +1,17 @@
+import React, { useState, useEffect } from 'react'
+export default function MobileView () {
+  const [isMobile, setIsMobile] = useState<boolean>(false)
+  useEffect(() => {
+    const isMobileDevice = () => {
+      const screenWidth = window.innerWidth
+      const mobileThreshold = 768
+      setIsMobile(screenWidth < mobileThreshold)
+    }
+    isMobileDevice()
+    window.addEventListener('resize', isMobileDevice)
+    return () => { // clean up event listner on when component unmount
+      window.removeEventListener('resize', isMobileDevice)
+    }
+  }, [])
+  return isMobile
+}

package/src/hooks/useBiBotChatBot.tsx

@@ -0,0 +1,107 @@
+import { message } from 'antd'
+import { appStateEnums } from '../config/appStateEnums'
+import React, { useEffect, useRef, useState, useContext, useCallback } from 'react'
+import { AppContext } from '../context/AppContext'
+
+import { v4 as uuidv4 } from 'uuid'
+import { askBiBot, getRemoteClientChatBubbleConfig, getRemoteClientChatPredefinedQuestions } from '../services/plugin-api'
+interface UseBiBotChatBotProps {
+    clientId: string
+  }
+
+interface ChatBubbleConfigProps {
+    bgColor?: string,
+    color?: string,
+    title?: string,
+    logo_url?: string
+}
+const useBiBotChatBot = ({ clientId }: UseBiBotChatBotProps) => {
+  const [predefinedQuestions, setPredefinedQuestions] = useState<string[]>([]) // State to store predefined questions
+  const [showPredefinedQuestions, setShowPredefinedQuestions] = useState(true); // State to toggle predefined questions
+  const { state, dispatch } = useContext(AppContext)
+  const { chatIsOpen } = state
+  const [messages, setMessages] = useState<Array<{ sender: 'user' | 'bot', text: string }>>([])
+  const [userInput, setUserInput] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const messageEndRef = useRef<HTMLDivElement>(null)
+  const [chatBubbleConfig, setChatBubbleConfig] = useState<ChatBubbleConfigProps>()
+
+      // Function to handle selecting a predefined question
+      const handlePredefinedQuestionSelect = (question: any) => {
+        setUserInput(question);
+        sendInputInquiry();
+        setShowPredefinedQuestions(false); // Hide predefined questions after selection
+      }
+      
+  const getChatBubbleConfig = useCallback(async()=>{
+    const remotePredefinedQuestions = await getRemoteClientChatPredefinedQuestions({client_id: clientId})
+    if (remotePredefinedQuestions){
+        setPredefinedQuestions(remotePredefinedQuestions)
+    }
+    const remoteChatBubbleConfig = await getRemoteClientChatBubbleConfig({client_id: clientId})
+    if (remoteChatBubbleConfig){
+        setChatBubbleConfig(remoteChatBubbleConfig)
+    }
+  },[clientId])
+
+  useEffect(()=>{
+    void getChatBubbleConfig()
+  }, [getChatBubbleConfig])
+  
+  useEffect(() => {
+    if (messageEndRef?.current) { messageEndRef.current.scrollIntoView({ behavior: 'smooth' }) }
+  }, [messages])
+
+  const toggleChat = () => {
+    dispatch({ type: appStateEnums.BIBOT, chatIsOpen: !chatIsOpen })
+  }
+
+  const handleUserInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUserInput(e.target.value)
+  }
+
+  async function sendInputInquiry () {
+    setIsLoading(true)
+    setUserInput('')
+    try {
+      if (userInput.trim()) {
+        // dispatch({ type: appStateEnums.BIBOT, chatIsOpen: true })
+        setMessages(messages => [...messages, { sender: 'user', text: userInput }])
+        const response = await askBiBot({
+          client_id: clientId,
+          q: userInput.trim(),
+          session_id: state.sessionId,
+          chat_id: uuidv4()
+        })
+        setMessages(messages => [...messages, { sender: 'bot', text: response }])
+      }
+    } catch (error: any) {
+      void message.error(error?.message ?? 'Failed to get response from server')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleKeyPress = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && !isLoading) {
+      await sendInputInquiry()
+    }
+  }
+  return {
+    chatIsOpen,
+    messages,
+    isLoading,
+    messageEndRef,
+    userInput,
+    handleUserInput,
+    handleKeyPress,
+    toggleChat,
+    sendInputInquiry,
+    chatBubbleConfig,
+    showPredefinedQuestions,
+    predefinedQuestions,
+    handlePredefinedQuestionSelect,
+  }
+}
+
+export { useBiBotChatBot }

package/src/hooks/usePluginFactory.tsx

@@ -0,0 +1,38 @@
+import axios from 'axios';
+import { endpoints } from '../config/endpointEnums';
+import React from 'react';
+const inferenceBaseURL = endpoints.inference;
+
+export const createPluginAxiosInstance = (params = {}, headers = {}) => {
+  const instance = axios.create({
+    baseURL: inferenceBaseURL,
+    timeout: 60000, // 1 minute
+    headers: {
+      'Content-Type': 'application/json',
+      ...headers
+    },
+    ...params
+  });
+
+
+  instance.interceptors.response.use(
+    (response) => {
+      return response
+    },
+    async (error) => {
+      let errMsg = 'An unknown error occurred'
+      if (error.response) {
+        errMsg = error.response.data.message
+      } else if (error.request) {
+        errMsg = 'No response received from the server.'
+      } else {
+        errMsg = `Error setting up the request: ${error.message}`
+      }
+      return await Promise.reject(new Error(errMsg))
+    }
+  )
+
+  return instance
+}
+
+  

package/src/index.css

@@ -0,0 +1,36 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+.upload-component {
+  .drop-area {
+    border: 2px dashed #ccc;
+    border-radius: 5px;
+    padding: 20px;
+    text-align: center;
+    cursor: pointer;
+    &:hover, &:focus {
+      border-color: #007bff;
+    }
+  }
+
+  .uploading { background-color: #fff3cd; }
+  .completed { background-color: #d4edda; }
+  .error { background-color: #f8d7da; }
+}

package/src/index.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+import BiBot from './component/bibot';
+export default BiBot;

package/src/reducers/appReducer.ts

@@ -0,0 +1,16 @@
+import { appStateEnums } from '../config/appStateEnums'
+import type { AppStates, AppAction } from 'types'
+import React from 'react';
+
+export const appReducer = (state: AppStates, action: AppAction): AppStates => {
+  console.log('This is the appReducer state', state, action)
+  switch (action.type) {
+    case appStateEnums.BIBOT:
+      return {
+        ...state,
+        chatIsOpen: action.chatIsOpen
+      }
+    default:
+      return state
+  }
+}

package/src/reducers/index.ts

@@ -0,0 +1,4 @@
+// created from 'create-ts-index'
+
+export * from './appReducer'
+

package/src/services/index.ts

@@ -0,0 +1,2 @@
+// export * from './bibot'
+export * from './plugin-api'

package/src/services/plugin-api.tsx

@@ -0,0 +1,120 @@
+import { domain, resources } from '../config/endpointEnums'
+import React from 'react';
+// import { createPluginAxiosInstance } from '../hooks/usePluginFactory'
+
+// const pluginAxiosInstance=createPluginAxiosInstance()
+
+interface Q_DATA_TYPE {
+  client_id: string
+    q: string
+    endSession?: boolean
+    session_id: string
+    chat_id: string
+    tries?: number
+}
+
+interface RemoteChatBubbleConfigProps {
+    bgColor: string,
+    chatColor: string,
+    title: string,
+    userImage: string
+}
+
+async function askTimedOutBiBot(data: Q_DATA_TYPE): Promise<string> {
+    try {
+        return 'Hello'
+        // const path=`${domain.bibot}${resources.timedOutLocalQ}`
+        // const response=await pluginAxiosInstance.post<any>(path, data)
+        // console.log(response)
+        // return response.data.message
+    } catch (error: any) {
+        console.log(error.message)
+        return error.message
+    }
+}
+
+async function askBiBot(data: Q_DATA_TYPE): Promise<string> {
+    try {
+        // const path=`${domain.inference}${resources.q}`
+        // const response=await pluginAxiosInstance.post<any>(path, data)
+        // console.log(response)
+        // return response.data.message
+        return 'Hello'
+    } catch (error1: any) {
+        console.log(error1.message)
+        if (error1.code==='ECONNABORTED'||error1.message.includes('Endpoint request timed out')) {
+            try {
+                return await askTimedOutBiBot({
+                    ...data,
+                    tries: 2
+                })
+            } catch (error2: any) {
+                if (error2.code==='ECONNABORTED'||error2.message.includes('Endpoint request timed out')) {
+                    try {
+                        return await askTimedOutBiBot({
+                            ...data,
+                            tries: 3
+                        })
+                    } catch (error3: any) {
+                        return error3.message
+                    }
+                } else {
+                    return error2.message
+                }
+            }
+        } else {
+            return error1.message
+        }
+    }
+}
+// TODO: Emmanuel fix the default returned values, especially the userImage to a default robot image
+async function getRemoteClientChatBubbleConfig(params: { client_id: string }): Promise<RemoteChatBubbleConfigProps> {
+    try {
+        return {
+            bgColor: 'white',
+            chatColor: 'blue',
+            title: 'ChatBot',
+            userImage: 'string'
+        }
+        // const path=`${domain.inference}${resources.chatBubble}`
+        // const response=await pluginAxiosInstance.get<any>(path, { params })
+        // return response.data
+    } catch (error: any) {
+        return {
+            bgColor: 'white',
+            chatColor: 'blue',
+            title: 'ChatBot',
+            userImage: 'string'
+        }
+    }
+}
+
+async function getRemoteClientChatPredefinedQuestions(params: { client_id: string }): Promise<string[]> {
+    try {
+        return ['Hello']
+        // const path=`${domain.inference}${resources.predefinedQ}`
+        // const response=await pluginAxiosInstance.get<any>(path, { params })
+        // return response.data.predefined_messages
+    } catch (error: any) {
+        return ['These are placeholders', 'They will be removed in production', 'This will be empty if there are no predefined questions', 'So hide if there are no predefined questions']
+    }
+}
+
+async function GetPredefinedQuestion (){
+    const clientId = '6c74b4bb-0395-4751-a55f-7d065d67c56b'
+    try {
+        return [{question: "q", answer: "a"}]
+    //   const path = `${domain.inference}${resources.predefinedQ}?client_id=${clientId}`
+    //   const response = await pluginAxiosInstance.get(path)
+    //   return response.data
+    } catch (error) {
+      console.error('Error fetching subscription:', error)
+    }
+  }
+
+export {
+    askBiBot,
+    getRemoteClientChatBubbleConfig,
+    getRemoteClientChatPredefinedQuestions,
+    GetPredefinedQuestion
+}

package/src/styles/RegisterPageStyle.css

@@ -0,0 +1,63 @@
+
+.amplify-button--primary {
+    background-color: #0fa781;
+}
+
+.preAuditLogo-on-registerPage{
+    max-height: 50px;
+    margin-bottom: 20px;
+   }
+.amplify-tabs-item[data-state=active] {
+ color: #fff;
+ border-color: #0fa781;
+}
+.amplify-tabs-item[data-state=active]:hover {
+    color: #fff;
+   }
+
+.amplify-tabs-item:hover {
+    color: #00152a;
+   }
+
+[data-amplify-authenticator] [data-amplify-router] {
+ background-color: #ffffff;
+ border-color: #b9eee1;
+}
+.amplify-tabs-item[data-spacing=equal]{
+
+}
+.amplify-button--link {
+    color: #00152a;
+}
+.amplify-button--link:hover {
+    color: #00152a;
+    background-color: #fff;
+}
+
+.amplify-input, .amplify-input:focus {
+border-color: #bed7f0;
+border: 1px solid;
+}
+.fieldContainer{
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+}
+select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start--quiet .amplify-field-group__control, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
+border-color: #c9ebe2;
+}
+.amplify-input{
+    border-color: #c9ebe2;
+}
+
+.amplify-checkbox__icon {
+  background-color: #c9ebe2;
+  border-color: #c9ebe2;
+}
+.input-select-field{
+    border-color: #0fa781;
+}
+.amplify-select{
+    border-color: #c9ebe2 !important;
+
+}