Added chat interface.

src/react/components/ChatMessage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import {Box, Text, Loader, Badge, Stack} from "@mantine/core";
+import {Badge, Box, Loader, Stack, Text} from "@mantine/core";
-import {IconCheck, IconX, IconRobot, IconUser} from "@tabler/icons-react";
+import {IconCheck, IconRobot, IconUser, IconX} from "@tabler/icons-react";
 import {ChatMessage as ChatMessageType} from "../types/chatTypes";
 
 interface ChatMessageProps {

src/react/components/ChatPanel.tsx

@@ -1,20 +1,9 @@
-import React, {useState, useRef, useEffect} from "react";
+import React, {useEffect, useRef, useState} from "react";
-import {
+import {ActionIcon, Alert, Box, CloseButton, Group, Paper, ScrollArea, Text, Textarea} from "@mantine/core";
-    Paper,
+import {IconAlertCircle, IconRobot, IconSend} from "@tabler/icons-react";
-    ScrollArea,
-    Textarea,
-    ActionIcon,
-    Box,
-    Text,
-    Group,
-    CloseButton,
-    Loader,
-    Alert
-} from "@mantine/core";
-import {IconSend, IconRobot, IconAlertCircle} from "@tabler/icons-react";
 import ChatMessage from "./ChatMessage";
 import {ChatMessage as ChatMessageType, ToolResult} from "../types/chatTypes";
-import {sendMessage, createUserMessage, createAssistantMessage, createLoadingMessage} from "../services/diagramAI";
+import {createAssistantMessage, createLoadingMessage, createUserMessage, sendMessage} from "../services/diagramAI";
 import log from "loglevel";
 
 const logger = log.getLogger('ChatPanel');

src/react/services/diagramAI.ts

@@ -1,5 +1,5 @@
 import {ChatMessage, DiagramToolCall, ToolResult} from "../types/chatTypes";
-import {createEntity, connectEntities, removeEntity, modifyEntity, listEntities} from "./entityBridge";
+import {connectEntities, createEntity, listEntities, modifyEntity, removeEntity} from "./entityBridge";
 import {v4 as uuidv4} from 'uuid';
 
 const SYSTEM_PROMPT = `You are a 3D diagram assistant helping users create and modify diagrams in a virtual reality environment.
@@ -173,7 +173,7 @@ export async function sendMessage(
     userMessage: string,
     conversationHistory: ChatMessage[],
     onToolResult?: (result: ToolResult) => void
-): Promise<{response: string; toolResults: ToolResult[]}> {
+): Promise<{ response: string; toolResults: ToolResult[] }> {
     const messages: ClaudeMessage[] = conversationHistory
         .filter(m => !m.isLoading)
         .map(m => ({

src/react/services/entityBridge.ts

@@ -1,11 +1,11 @@
 import {DiagramEntity, DiagramEntityType, DiagramTemplates} from "../../diagram/types/diagramEntity";
 import {
-    CreateEntityParams,
-    ConnectEntitiesParams,
-    RemoveEntityParams,
-    ModifyEntityParams,
-    SHAPE_TO_TEMPLATE,
     COLOR_NAME_TO_HEX,
+    ConnectEntitiesParams,
+    CreateEntityParams,
+    ModifyEntityParams,
+    RemoveEntityParams,
+    SHAPE_TO_TEMPLATE,
     ToolResult
 } from "../types/chatTypes";
 import {v4 as uuidv4} from 'uuid';
@@ -124,7 +124,12 @@ export function listEntities(): Promise<ToolResult> {
     return new Promise((resolve) => {
         const responseHandler = (e: CustomEvent) => {
             document.removeEventListener('chatListEntitiesResponse', responseHandler as EventListener);
-            const entities = e.detail.entities as Array<{id: string; template: string; text: string; position: {x: number; y: number; z: number}}>;
+            const entities = e.detail.entities as Array<{
+                id: string;
+                template: string;
+                text: string;
+                position: { x: number; y: number; z: number }
+            }>;
 
             if (entities.length === 0) {
                 resolve({

src/react/types/chatTypes.ts

@@ -1,4 +1,4 @@
-import {DiagramEntity, DiagramTemplates} from "../../diagram/types/diagramEntity";
+import {DiagramTemplates} from "../../diagram/types/diagramEntity";
 
 export type ChatRole = 'user' | 'assistant';