feat: Add ExcelParserContainer

Author: kekekuli

package-lock.json

@@ -37,6 +37,7 @@
     "axios": "^1.7.9",
     "express": "^4.21.2",
     "react": "^18.2.0",
+    "react-chat-elements": "^12.0.17",
     "react-dom": "^18.2.0",
     "react-resize-detector": "^12.0.1",
     "react-toastify": "^11.0.2",

package.json

@@ -1,36 +1,18 @@
-import React, {useState, useEffect, useRef} from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Box, Stack, Backdrop } from '@mui/material';
 import MessageBox from './MessageBox';
 import BoxHeader from './BoxHeader';
 import InputField from './InputField';
 import { testMessages } from '../utils/TestDatas';
 import MessageParser from '../utils/MessageParser';
-import { ToastContainer, toast } from 'react-toastify';
-import { parseExcelTableToJson, getExcelTableNames } from '../utils/ExcelParser';
-import { toastOptins } from '../utils/ToastConfig';
+import { ToastContainer } from 'react-toastify';
 import type { ExcelTableData } from './ExcelTable';
+import ExcelParserContainer from './ExcelParserContainer';
 
 export default function App() {
   const [waitingResponse, setWaitingResponse] = useState(false);
   const [messages, setMessages] = useState(testMessages);
   const [excelTableData, setExcelTableData] = useState<ExcelTableData | null>(null);
-  const [readable, setReadable] = useState(true);
-  
-  const messageEndRef = useRef<HTMLDivElement>(null);
-  const backDropOpen = !readable;
-
-  // Handle fisrt time loads and parse excel tables
-  useEffect(() => {
-    Office.onReady(() => {
-      getExcelTableNames().then((tableNames) => {
-        parseExcelTableToJson(tableNames[0]).then((excelTable) => {
-          setExcelTableData(excelTable);
-        }).catch(() => {
-          setReadable(false);
-        })
-      })
-    });
-  }, []);
 
   // Handle user input
   function handleSend(message: string) {
@@ -47,47 +29,15 @@ export default function App() {
     }, 1000);
   }
 
-  // Handle auto scroll of message box
-  useEffect(() => {
-    if (messageEndRef.current) {
-      // The "block" property should be set to "end", while default value is "start" causing unexpected behavior
-      messageEndRef.current.scrollIntoView({ behavior: 'smooth' , block: "end"});
-    }
-  }, [messages]);
-
-  // Handle notifying excel tables read result
-  useEffect(() => {
-    if (!readable){
-      toast.error('Can not read the table, reopen one that available', {
-        ...toastOptins,
-        position: 'top-center',
-        autoClose: false,
-        closeButton: false,
-        hideProgressBar: true,
-        draggable: false,
-        theme: 'dark',
-        closeOnClick: false,
-      });
-    }
-    else{
-      toast.success('Tables Finded', toastOptins);
-    }
-  }, [readable])
-
   return (
     <Stack className='h-screen'>
       <BoxHeader waitingResponse={waitingResponse} />
       <Box className=' overflow-y-scroll flex-grow'>
         <MessageBox messages={messages} />
-        <div ref={messageEndRef}></div>
       </Box>
       <InputField onSend={handleSend} waitingResponse={waitingResponse} />
       <ToastContainer />
-      <Backdrop
-        sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
-        open={backDropOpen}
-      >
-      </Backdrop>
+      <ExcelParserContainer setExcelTableData={setExcelTableData} />      
     </Stack>
   );
 }

packages/taskpane/components/App.tsx

@@ -0,0 +1,55 @@
+import { parseExcelTableToJson, getExcelTableNames } from '../utils/ExcelParser';
+import type { ExcelTableData } from './ExcelTable';
+import React, { useEffect, useState } from 'react';
+import { Backdrop } from '@mui/material';
+import { toastOptins } from '../utils/ToastConfig';
+import { toast } from 'react-toastify';
+
+interface ExcelParserContainerProps {
+    setExcelTableData: React.Dispatch<React.SetStateAction<ExcelTableData | null>>;
+}
+
+export default function ExcelParserContainer({ setExcelTableData }: ExcelParserContainerProps) {
+    const [readable, setReadable] = useState(true);
+    const backDropOpen = !readable;
+
+    // Handle fisrt time loads and parse excel tables
+    useEffect(() => {
+        Office.onReady(() => {
+            getExcelTableNames().then((tableNames) => {
+                parseExcelTableToJson(tableNames[0]).then((excelTable) => {
+                    setExcelTableData(excelTable);
+                }).catch(() => {
+                    setReadable(false);
+                })
+            })
+        });
+    }, []);
+
+    // Handle notifying excel tables read result
+    useEffect(() => {
+        if (!readable) {
+            toast.error('Can not read the table, reopen one that available', {
+                ...toastOptins,
+                position: 'top-center',
+                autoClose: false,
+                closeButton: false,
+                hideProgressBar: true,
+                draggable: false,
+                theme: 'dark',
+                closeOnClick: false,
+            });
+        }
+        else {
+            toast.success('Tables Finded', toastOptins);
+        }
+    }, [readable])
+
+    return (
+        <Backdrop
+            sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
+            open={backDropOpen}
+        >
+        </Backdrop>
+    )
+}

packages/taskpane/components/ExcelParserContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef } from "react";
 import { Box, Stack, SxProps } from "@mui/system";
 import ExcelTable from "./ExcelTable";
 import { Message } from "../utils/MessageParser";
@@ -10,6 +10,15 @@ interface MessageBoxProps {
 }
 
 export default function MessageBox({ messages }: MessageBoxProps) {
+    // Handle auto scroll of message box
+    const messageEndRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (messageEndRef.current) {
+            // The "block" property should be set to "end", while default value is "start" causing unexpected behavior
+            messageEndRef.current.scrollIntoView({ behavior: 'smooth', block: "end" });
+        }
+    }, [messages]);
     const renderItems = messages.map((message, index) => {
         let wrapperAppend = message.role === "user" ? "justify-end" : "justify-start";
         let boxAppend = message.role === "user" ? "mr-3" : "ml-3";
@@ -22,7 +31,7 @@ export default function MessageBox({ messages }: MessageBoxProps) {
             maxWidth: "60%",
             wordWrap: "break-word",
         }
-        if (message.scatter) 
+        if (message.scatter)
             sx.height = "fit-content";
 
         // return the wrapper and contents
@@ -37,8 +46,11 @@ export default function MessageBox({ messages }: MessageBoxProps) {
     })
 
     return (
-        <Stack spacing={2}>
-            {renderItems}
-        </Stack>
+        <>
+            <Stack spacing={2}>
+                {renderItems}
+            </Stack>
+            <div ref={messageEndRef}></div>
+        </>
     )
 }