Minor refactor: removed inline chat type definitions, created central…

… chat type definitions at types/chat.ts (#25)

* Add @types/react-syntax-highlighter for improved TypeScript support

* Refactor: Centralize type definitions and update imports

- Created types/chat.ts with shared type definitions
- Updated ChatArea/index.tsx to use imported types
- Updated MessageContent.tsx to use new ParsedResponse and MessageContentState types
- Removed inline type definitions from components

* refactor(ChatArea): Remove inline types, import from types folder

ui/components/ChatArea/MessageContent.tsx

@@ -9,6 +9,7 @@ import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneLight, oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import 'katex/dist/katex.min.css';
 import { useTheme } from 'next-themes';
+import { MessageContentState, ParsedResponse } from '@/types/chat';
 
 // Import only the languages you need
 import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
@@ -28,22 +29,22 @@ interface MessageContentProps {
 
 const MessageContent: React.FC<MessageContentProps> = ({ content, role }) => {
   const { theme } = useTheme();
-  const [state, setState] = useState({
+  const [state, setState] = useState<MessageContentState>({
     thinking: true,
-    parsed: {},
+    parsed: { response: '' },
     error: false
   });
 
   useEffect(() => {
     if (role !== "assistant" || !content) {
-      setState({ thinking: false, parsed: {}, error: false });
+      setState({ thinking: false, parsed: { response: '' }, error: false });
       return;
     }
 
     const timer = setTimeout(() => setState(s => ({ ...s, thinking: false, error: true })), 30000);
 
     try {
-      const result = JSON.parse(content);
+      const result = JSON.parse(content) as ParsedResponse;
       console.log("🔍 Parsed Result:", result);
 
       if (result.response && result.response.length > 0 && result.response !== "...") {
@@ -52,7 +53,7 @@ const MessageContent: React.FC<MessageContentProps> = ({ content, role }) => {
       }
     } catch (error) {
       console.error("Error parsing JSON:", error);
-      setState({ thinking: false, parsed: {}, error: true });
+      setState({ thinking: false, parsed: { response: '' }, error: true });
     }
 
     return () => clearTimeout(timer);

ui/components/ChatArea/index.tsx

@@ -11,25 +11,7 @@ import Artifacts from '../Artifacts';
 import EditModal from './EditModal';
 import ArtifactSidebar from '../Artifacts/Sidebar';
 import { motion, AnimatePresence } from 'framer-motion';
-
-interface Message {
-  id: string;
-  role: string;
-  content: string;
-}
-
-type Model = {
-  id: string;
-  name: string;
-};
-
-interface ArtifactContent {
-  id: string;
-  type: 'code' | 'html' | 'text' | 'log';
-  content: string;
-  language?: string;
-  name: string;
-}
+import { Message, Model, ArtifactContent } from "@/types/chat";
 
 function ChatArea() {
   const [messages, setMessages] = useState<Message[]>([]);

ui/types/chat.ts

@@ -0,0 +1,28 @@
+export interface Message {
+    id: string;
+    role: string;
+    content: string;
+  }
+
+  export type Model = {
+    id: string;
+    name: string;
+  };
+
+  export interface ArtifactContent {
+    id: string;
+    type: 'code' | 'html' | 'text' | 'log';
+    content: string;
+    language?: string;
+    name: string;
+  }
+
+  export interface ParsedResponse {
+    response: string;
+  }
+
+  export interface MessageContentState {
+    thinking: boolean;
+    parsed: ParsedResponse;
+    error: boolean;
+  }