udpate

src/apps/home/index.tsx

@@ -2,9 +2,12 @@ import { app } from '../ai';
 
 
 import { Sender, XProvider } from '@ant-design/x';
-import { useEffect, useRef } from 'react';
-
+import { useEffect, useRef, useState } from 'react';
+import { postChat } from './chat';
 import { Nav } from '../nav';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { useHomeStore } from './store';
 
 const useFocus = () => {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -31,17 +34,29 @@ const useFocus = () => {
   return inputRef;
 }
 
-
 export const App = () => {
   const inputRef = useFocus();
+  const [content, setContent] = useState<string>('');
+  const { inputValue, setInputValue, isLoading, setLoading } = useHomeStore();
 
-
-
-  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');
-      }} />
+  return <div className='container mx-auto px-4 py-4 md:p-4'>
+    <div className='md:top-20 left-0 mb-4 right-0 w-full  mx-auto px-4 md:px-0' ref={inputRef}>
+      <Sender 
+        allowSpeech 
+        value={inputValue}
+        onChange={setInputValue}
+        loading={isLoading}
+        onSubmit={async (message) => {
+          console.log('Submitted', message);
+          setLoading(true);
+          const res = await postChat(message);
+          setContent(res || ' ');
+          setLoading(false);
+        }} 
+      />
+    </div>
+    <div className='mb-20 md:mb-16 px-2 md:px-0'>
+      {content}
     </div>
   </div >;
 }
@@ -66,5 +81,6 @@ export const AppProvider = () => {
   >
     <Nav />
     <App />
+    <ToastContainer />
   </XProvider>;
 }