Fixing Attachment opening in input bug (#334)

* Fixing Attachment opening in input bug

* Removing Focused state

* adding css for input border

Author: nakul-py

packages/jupyter-chat/src/components/input/chat-input.tsx

@@ -46,7 +46,6 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
   const [toolbarElements, setToolbarElements] = useState<
     InputToolbarRegistry.IToolbarItem[]
   >([]);
-  const [isFocused, setIsFocused] = useState<boolean>(false);
   const [writers, setWriters] = useState<IChatModel.IWriter[]>([]);
 
   /**
@@ -214,9 +213,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
       <Box
         sx={{
           border: '1px solid',
-          borderColor: isFocused
-            ? 'var(--jp-brand-color1)'
-            : 'var(--jp-border-color1)',
+          borderColor: 'var(--jp-border-color1)',
           borderRadius: 2,
           transition: 'border-color 0.2s ease',
           display: 'flex',
@@ -262,8 +259,6 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
               onKeyDown={handleKeyDown}
               placeholder="Type a chat message, @ to mention..."
               inputRef={inputRef}
-              onFocus={() => setIsFocused(true)}
-              onBlur={() => setIsFocused(false)}
               onSelect={() =>
                 (model.cursorIndex = inputRef.current?.selectionStart ?? null)
               }

packages/jupyter-chat/style/input.css

@@ -45,3 +45,7 @@
 .jp-chat-input-toolbar .jp-chat-send-include-opener {
   padding: 4px 0;
 }
+
+.jp-chat-input-container:focus-within > div:first-of-type {
+  border-color: var(--jp-brand-color1);
+}