update

src/apps/home/index.tsx

@@ -0,0 +1,70 @@
+import { app } from '../ai';
+
+
+import { Sender, XProvider } from '@ant-design/x';
+import { useEffect, useRef } from 'react';
+
+import { Nav } from '../nav';
+
+const useFocus = () => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    // Focus the input element inside Sender component
+    const focusInput = () => {
+      if (inputRef.current) {
+        const input = inputRef.current.querySelector('input, textarea') as HTMLInputElement | HTMLTextAreaElement;
+        if (input) {
+          input.focus();
+        }
+      }
+    };
+
+    // Focus on mount
+    focusInput();
+
+    // Also focus after a short delay to ensure everything is rendered
+    const timeoutId = setTimeout(focusInput, 100);
+
+    return () => clearTimeout(timeoutId);
+  }, []);
+
+  return inputRef;
+}
+
+
+export const App = () => {
+  const inputRef = useFocus();
+
+
+
+  return <div className='container mx-auto p-4'>
+    <div className='fixed bottom-8 w-1/2 justify-self-center' ref={inputRef}>
+      <Sender allowSpeech onSubmit={() => {
+        console.log('Submitted');
+      }} />
+    </div>
+  </div >;
+}
+
+
+export const AppProvider = () => {
+  return <XProvider
+    theme={{
+      token: {
+        colorPrimary: '#000000',
+        colorBgBase: '#ffffff',
+        colorTextBase: '#000000',
+        colorBorder: '#d9d9d9',
+        colorBgContainer: '#ffffff',
+        colorBgElevated: '#ffffff',
+        colorBgLayout: '#ffffff',
+        colorText: '#000000',
+        colorTextSecondary: '#666666',
+        colorTextTertiary: '#999999',
+      }
+    }}
+  >
+    <Nav />
+    <App />
+  </XProvider>;
+}