update

src/apps/home/index.tsx

@@ -1,14 +1,14 @@
 import { app } from '../ai';
 
 
-import { Sender, XProvider } from '@ant-design/x';
+import { Sender, XProvider, Bubble } from '@ant-design/x';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, 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';
-
+import { nanoid } from 'nanoid';
 const useFocus = () => {
   const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
@@ -37,10 +37,13 @@ const useFocus = () => {
 export const App = () => {
   const inputRef = useFocus();
   const [content, setContent] = useState<string>('');
-  const { inputValue, setInputValue, isLoading, setLoading } = useHomeStore();
+  const { inputValue, setInputValue, isLoading, setLoading, messages, addMessage } = useHomeStore();
 
-  return <div className='container mx-auto px-4 py-4 md:p-4'>
+  const msg = useMemo(() => {
-    <div className='md:top-20 left-0 mb-4 right-0 w-full  mx-auto px-4 md:px-0' ref={inputRef}>
+    return <Bubble.List items={messages} autoScroll ></Bubble.List>
+  }, [messages]);
+  return <div className='container mx-auto px-4 py-4 md:p-4 flex flex-col' style={{ height: 'calc(100vh - 64px)' }}>
+    <div className='flex-shrink-0 mb-4 w-full mx-auto px-4 md:px-0' ref={inputRef}>
       <Sender
         allowSpeech
         value={inputValue}
@@ -49,14 +52,17 @@ export const App = () => {
         onSubmit={async (message) => {
           console.log('Submitted', message);
           setLoading(true);
+          addMessage({ role: 'user', content: message, key: nanoid() });
+
           const res = await postChat(message);
           setContent(res || ' ');
           setLoading(false);
+          addMessage({ role: 'assistant', content: res || ' ', key: nanoid() });
         }}
       />
     </div>
-    <div className='mb-20 md:mb-16 px-2 md:px-0'>
+    <div className='flex-1 overflow-y-auto px-2 md:px-0 mb-4'>
-      {content}
+      {msg}
     </div>
   </div >;
 }

src/apps/home/store.ts

@@ -16,6 +16,8 @@ interface HomeState {
   // Actions
   setInputValue: (value: string) => void;
   setLoading: (loading: boolean) => void;
+  messages: { role: 'user' | 'assistant'; content: string, key: string }[];
+  addMessage: (message: { role: 'user' | 'assistant'; content: string, key: string }) => void;
 }
 
 export const useHomeStore = create<HomeState>((set) => ({
@@ -24,4 +26,8 @@ export const useHomeStore = create<HomeState>((set) => ({
 
   setInputValue: (value) => set({ inputValue: value }),
   setLoading: (loading) => set({ isLoading: loading }),
+  messages: [],
+  addMessage: (message) => {
+    set((state) => ({ messages: [...state.messages, message] }))
+  }
 }));