fix(configuration): fix build errors

Author: adamma1024

fe_repo/src/App.tsx

@@ -1,17 +1,21 @@
 import { Header, Content, ChatBox } from './pages'
 import { useState } from "react";
-import { sendMessage } from "./functions/api.tsx";
+import { sendMessage } from "./functions/api.ts";
 
+export type Message = {
+  text: string,
+  isUser: boolean,
+}
 function App() {
 
-  const [messages, setMessages] = useState([])
+  const [messages, setMessages] = useState<Message[]>([])
 
   const onSendMessage = (message: string) => {
-    setMessages((messages) => [...messages, { text: message, user: true }]);
+    setMessages((messages) => [...messages, { text: message, isUser: true }]);
 
     setTimeout(() => {
       // handle message sent, update conversation section
-      const response = { text: sendMessage(message), user: false }
+      const response = { text: sendMessage(message), isUser: false }
       setMessages((messages) => [...messages, response]);
     }, 1000);
   }

fe_repo/src/components/TextArea.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
-import {TextareaAutosize as BaseTextareaAutosize} from '@mui/base/TextareaAutosize';
-import {styled} from '@mui/system';
+import { TextareaAutosize as BaseTextareaAutosize, TextareaAutosizeProps } from '@mui/base/TextareaAutosize';
+import { styled } from '@mui/system';
 
-type Textarea = {
+interface ITextarea extends TextareaAutosizeProps {
   className?: string,
 }
 
@@ -29,7 +28,7 @@ const grey = {
 };
 
 const StyledTextarea = styled(BaseTextareaAutosize)(
-  ({theme}) => `
+  ({ theme }) => `
     box-sizing: border-box;
     width: 320px;
     font-family: 'IBM Plex Sans', sans-serif;
@@ -59,7 +58,7 @@ const StyledTextarea = styled(BaseTextareaAutosize)(
   `,
 );
 
-export const Textarea = (props: Textarea) => {
+export const Textarea = (props: ITextarea) => {
   return (
     <StyledTextarea
       aria-label="Textarea"

fe_repo/src/pages/ChatBox.tsx

@@ -1,9 +1,12 @@
-import {UploadIcon} from "../icons"
-import {Textarea} from '../components'
-import {useState} from "react";
-import {uploadFile} from "../functions/api.tsx";
+import { UploadIcon } from "../icons"
+import { Textarea } from '../components'
+import { useState } from "react";
+import { uploadFile } from "../functions/api.ts";
 
-export const ChatBox = ({onSendMessage}) => {
+interface IChatBoxProps {
+  onSendMessage: (message: string) => void;
+}
+export const ChatBox = ({ onSendMessage }: IChatBoxProps) => {
 
   const [message, setMessage] = useState("");
 
@@ -25,23 +28,24 @@ export const ChatBox = ({onSendMessage}) => {
           const input = document.createElement("input");
           input.type = 'file';
           input.accept = 'image/*,.pdf,.doc,.docx';
+          // @ts-expect-error @Linchen
           input.onchange = handleFiles;
           input.click();
 
-          function handleFiles(event) {
-            const file = event.target?.files[0];
+          function handleFiles(event: { target: HTMLInputElement }) {
+            if (!event.target || !event.target.files) return;
+            const file = event.target.files[0];
             if (file) {
               // upload if file is valid
               uploadFile(file);
             }
           }
         }}
       >
-        <UploadIcon/>
+        <UploadIcon />
       </div>
       <Textarea
         className="flex-1"
-        value={message}
         onChange={(e) => setMessage(e.target.value)}
         onKeyUp={(e) => {
           // listen for enter key

fe_repo/src/pages/Content.tsx

@@ -1,7 +1,12 @@
 import { useEffect, useRef } from "react";
+import { Message } from "../App";
 
-export const Content = ({ messages }) => {
-  const contentRef = useRef(null);
+interface IContentProps {
+  messages: Message[];
+}
+
+export const Content = ({ messages }: IContentProps) => {
+  const contentRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (contentRef.current) {
@@ -15,12 +20,12 @@ export const Content = ({ messages }) => {
         <div
           key={index}
           /* set user's message to right and others to left */
-          className={`p-2 flex ${msg.user ? 'justify-end' : 'justify-start'}`}
+          className={`p-2 flex ${msg.isUser ? 'justify-end' : 'justify-start'}`}
         >
           <div
             className={`max-w-xs p-2 rounded-lg ${
               // set user's message to blue and others to green
-              msg.user
+              msg.isUser
                 ? 'bg-blue-500 text-green'
                 : 'bg-green-500 text-black'
               }`}

fe_repo/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/textarea.tsx","./src/components/index.ts","./src/icons/icons.tsx","./src/icons/index.ts","./src/pages/chatbox.tsx","./src/pages/content.tsx","./src/pages/header.tsx","./src/pages/index.ts"],"version":"5.6.2"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/textarea.tsx","./src/components/index.ts","./src/functions/api.test.ts","./src/functions/api.ts","./src/icons/icons.tsx","./src/icons/index.ts","./src/pages/chatbox.tsx","./src/pages/content.tsx","./src/pages/header.tsx","./src/pages/index.ts"],"version":"5.6.2"}