Task/wc 369 improve ai chat usability

client/modules/workspace/src/AISearch/AIChat.tsx

@@ -52,6 +52,7 @@ interface Message {
 
 interface AIChatProps {
   closed?: boolean;
+  senderRef?: React.Ref<React.ElementRef<typeof Sender>>;
 }
 
 interface WSMessage {
@@ -60,7 +61,7 @@ interface WSMessage {
   key: string;
 }
 
-export const AIChat: React.FC<AIChatProps> = ({ closed }) => {
+export const AIChat: React.FC<AIChatProps> = ({ closed, senderRef }) => {
   const [messages, setMessages] = useState<Message[]>([
     {
       key: 'welcome',
@@ -298,6 +299,7 @@ export const AIChat: React.FC<AIChatProps> = ({ closed }) => {
       >
         <div className={styles.sender}>
           <Sender
+            ref={senderRef}
             onSubmit={handleSendMessage}
             placeholder="Ask me anything about DesignSafe publications and documentation..."
             loading={loading}

client/modules/workspace/src/AISearch/AIChatButton.tsx

@@ -1,10 +1,12 @@
 import { Button, Drawer } from 'antd';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
+import type { Sender } from '@ant-design/x';
 import { AIChat } from './AIChat';
 import styles from './AIChatButton.module.css';
 
 export const AIChatButton: React.FC = () => {
   const [showDrawer, setShowDrawer] = useState(false);
+  const senderRef = useRef<React.ElementRef<typeof Sender>>(null);
 
   return (
     <div id="nav-ai-root">
@@ -31,11 +33,14 @@ export const AIChatButton: React.FC = () => {
         placement="bottom"
         height="var(--ai-chat-drawer-height)"
         open={showDrawer}
+        afterOpenChange={(open) => {
+          if (open) senderRef.current?.focus();
+        }}
         onClose={() => setShowDrawer(false)}
         maskClosable={true}
         rootClassName={styles.drawer}
       >
-        <AIChat closed={!showDrawer} />
+        <AIChat closed={!showDrawer} senderRef={senderRef} />
       </Drawer>
     </div>
   );