add disabled state

reaviz · Jul 30, 2024 · 9177f84 · 9177f84
1 parent 1a7df7a
commit 9177f84
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 4 deletions.
diff --git a/src/Chat.tsx b/src/Chat.tsx
@@ -57,6 +57,11 @@ export interface ChatProps extends PropsWithChildren {
    */
   isLoading?: boolean;
 
+  /**
+   * Whether to disable the chat.
+   */
+  disabled?: boolean;
+
   /**
    * Callback function to handle when a session is selected.
    */
@@ -84,6 +89,7 @@ export const Chat: FC<ChatProps> = ({
   theme: customTheme = chatTheme,
   onNewSession,
   remarkPlugins,
+  disabled,
   style,
   className
 }) => {
@@ -140,6 +146,7 @@ export const Chat: FC<ChatProps> = ({
       activeSession,
       remarkPlugins,
       theme,
+      disabled,
       isLoading,
       activeSessionId: internalActiveSessionID,
       selectSession: handleSelectSession,
@@ -148,6 +155,7 @@ export const Chat: FC<ChatProps> = ({
     }),
     [
       isLoading,
+      disabled,
       theme,
       remarkPlugins,
       sessions,

diff --git a/src/ChatContext.ts b/src/ChatContext.ts
@@ -5,6 +5,7 @@ import { PluggableList } from 'react-markdown/lib';
 
 export interface ChatContextProps {
   sessions: Session[];
+  disabled?: boolean;
   activeSessionId: string | null;
   theme?: ChatTheme;
   isLoading?: boolean;

diff --git a/src/ChatInput.tsx b/src/ChatInput.tsx
@@ -71,7 +71,7 @@ export const ChatInput: FC<ChatInputProps> = ({
   stopIcon = <StopIcon />,
   attachIcon = <AttachIcon />
 }) => {
-  const { theme, isLoading } = useContext(ChatContext);
+  const { theme, isLoading, disabled } = useContext(ChatContext);
   const [message, setMessage] = useState<string>('');
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -107,7 +107,7 @@ export const ChatInput: FC<ChatInputProps> = ({
         defaultValue={defaultValue}
         onKeyPress={handleKeyPress}
         placeholder={placeholder}
-        disabled={isLoading}
+        disabled={isLoading || disabled}
       />
       {allowedFiles?.length > 0 && (
         <>
@@ -120,6 +120,7 @@ export const ChatInput: FC<ChatInputProps> = ({
           />
           <Button
             title="Upload"
+            disabled={isLoading || disabled}
             className={cn(theme.input.upload)}
             onClick={() => fileInputRef.current?.click()}
           >
@@ -132,6 +133,7 @@ export const ChatInput: FC<ChatInputProps> = ({
           title="Stop"
           className={cn(theme.input.stop)}
           onClick={onStopMessage}
+          disabled={disabled}
         >
           {stopIcon}
         </Button>
@@ -140,7 +142,7 @@ export const ChatInput: FC<ChatInputProps> = ({
         title="Send"
         className={cn(theme.input.send)}
         onClick={handleSendMessage}
-        disabled={isLoading}
+        disabled={isLoading || disabled}
       >
         {sendIcon}
       </Button>

diff --git a/src/SessionsList/NewSessionButton.tsx b/src/SessionsList/NewSessionButton.tsx
@@ -14,7 +14,7 @@ export const NewSessionButton: FC<NewSessionButtonProps> = ({
   children,
   newSessionText = 'New Session'
 }) => {
-  const { theme, createSession } = useContext(ChatContext);
+  const { theme, createSession, disabled } = useContext(ChatContext);
   const Comp = children ? Slot : Button;
 
   return (
@@ -23,6 +23,7 @@ export const NewSessionButton: FC<NewSessionButtonProps> = ({
       disableMargins
       color="primary"
       className={cn(theme.sessions.create)}
+      disabled={disabled}
       onClick={createSession}
     >
       {children || newSessionText}

diff --git a/stories/Demos.stories.tsx b/stories/Demos.stories.tsx
@@ -1176,6 +1176,7 @@ export const OpenAIIntegration = () => {
           viewType="console"
           sessions={sessions}
           isLoading={isLoading}
+          disabled={!apiKey}
           onDeleteSession={handleDeleteSession}
           onSendMessage={handleNewMessage}
           activeSessionId={activeSessionId}