Merge pull request #9 from palico-ai/copilot-widget

FIX: Fixed ChatWidget AutoFocus

Author: shikdernyc

src/components/chat/index.tsx

@@ -5,14 +5,16 @@ import { PalicoContext } from '../../context'
 import { ChatHistory } from './history'
 import { ChatInput } from './input'
 
+export type GetSendMessageParamsFN = (userInput: string) => Promise<{
+  message: string
+  context: Record<string, unknown>
+}>
+
 export interface ChatUIProps {
   headerTitle?: string
   inputPlaceholder?: string
   initialPlaceholderAgentMessage?: string
-  getSendMessageParams?: (userInput: string) => Promise<{
-    message: string
-    params: Record<string, unknown>
-  }>
+  getSendMessageParams?: GetSendMessageParamsFN
 }
 
 const DEFAULT_VALUES = {
@@ -27,16 +29,17 @@ const ChatUI: React.FC<ChatUIProps> = ({
   initialPlaceholderAgentMessage = DEFAULT_VALUES.initialPlaceholderAgentMessage,
   getSendMessageParams
 }) => {
-  const { conversationHistory, sendMessage } = useContext(PalicoContext)
+  const { conversationHistory, loading, sendMessage } = useContext(PalicoContext)
   const [errorMessage, setErrorMessage] = React.useState<string | null>(null)
 
   const handleSend = async (message: string): Promise<void> => {
+    if (!sendMessage) throw new Error('sendMessage is not defined')
     try {
       if (getSendMessageParams) {
-        const { message: newMessage, params } = await getSendMessageParams(
+        const { message: newMessage, context } = await getSendMessageParams(
           message
         )
-        await sendMessage(newMessage, params)
+        await sendMessage(newMessage, context)
       } else {
         await sendMessage(message, {})
       }
@@ -56,8 +59,10 @@ const ChatUI: React.FC<ChatUIProps> = ({
       alignItems="stretch"
       spacing={2}
       sx={{
-        p: 2,
-        height: '100%'
+        width: '100%',
+        height: '100%',
+        padding: 2,
+        boxSizing: 'border-box'
       }}
     >
       <Box>
@@ -83,7 +88,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
       <Box>
         <ChatInput
           placeholder={inputPlaceholder}
-          disabled={errorMessage !== null}
+          disabled={errorMessage !== null || loading}
           onSend={handleSend}
         />
       </Box>

src/components/chat/input.tsx

@@ -1,5 +1,4 @@
-import { TextField } from '@mui/material'
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 
 export interface ChatInputProps {
   onSend: (message: string) => Promise<void>
@@ -12,11 +11,13 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   disabled,
   placeholder = 'Type a message'
 }) => {
-  const inputRef = React.useRef<HTMLInputElement>(null)
+  const inputRef = React.useRef<HTMLInputElement | null>(null)
   const [message, setMessage] = React.useState('')
   const [loading, setLoading] = React.useState(false)
 
-  const handleFormSubmit = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
+  const handleFormSubmit = async (
+    event: React.FormEvent<HTMLFormElement>
+  ): Promise<void> => {
     event.preventDefault()
     try {
       setLoading(true)
@@ -30,20 +31,30 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setMessage(event.target.value)
   }
-
   const enableInput = useMemo(() => !loading && !disabled, [loading, disabled])
 
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current?.focus()
+    }
+  }, [inputRef, enableInput])
+
   return (
     <form onSubmit={handleFormSubmit}>
-      <TextField
-        autoComplete="off"
+      <input
+        style={{
+          width: '100%',
+          padding: '10px',
+          fontSize: '16px',
+          border: '1px solid #ccc',
+          borderRadius: '4px',
+          boxSizing: 'border-box'
+        }}
+        autoComplete='off'
+        disabled={!enableInput}
         placeholder={placeholder}
         ref={inputRef}
-        disabled={!enableInput}
-        inputRef={inputRef}
-        size="small"
-        fullWidth
-        variant="outlined"
+        type="text"
         value={message}
         onChange={handleChange}
       />

src/components/chat_widget/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Paper, Popover } from '@mui/material'
+import { Box, Popover } from '@mui/material'
 import ChatUI, { type ChatUIProps } from '../chat'
 import { type PropsOf } from '@emotion/react'
 
@@ -37,14 +37,9 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
       anchorOrigin={anchorOrigin}
       transformOrigin={transformOrigin}
     >
-      <Paper
-        sx={{
-          width,
-          height
-        }}
-      >
+      <Box sx={{ width, height }}>
         <ChatUI {...chatUIProps} />
-      </Paper>
+      </Box>
     </Popover>
   )
 }