revert

src/components/Board.tsx

@@ -14,7 +14,7 @@ import { multiplayerAssetStore } from '../client/multiplayerAssetStore'
 import { customSchema } from '../../worker/TldrawDurableObject'
 
 import React, { useState } from 'react';
-import { chatBox } from '@/shapes/ChatBoxShapeUtil';
+import { ChatBox } from '@/shapes/ChatBoxShapeUtil';
 import { components, uiOverrides } from '@/ui-overrides'
 
 const WORKER_URL = `https://jeffemmett-canvas.jeffemmett.workers.dev`
@@ -61,7 +61,7 @@ export function Board() {
 						onChange={handleNameChange}
 						placeholder="Enter your name"
 					/>
-					<chatBox
+					<ChatBox
 						userName={userName}
 						roomId={roomId} // Added roomId
 						w={200} // Set appropriate width

src/shapes/ChatBoxShapeUtil.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { BaseBoxShapeUtil, TLBaseShape } from "tldraw";
 
 export type IChatBoxShape = TLBaseShape<
-    'chatBox',
+    'ChatBox',
     {
         w: number
         h: number
@@ -12,7 +12,7 @@ export type IChatBoxShape = TLBaseShape<
 >
 
 export class ChatBoxShape extends BaseBoxShapeUtil<IChatBoxShape> {
-    static override type = 'chatBox'
+    static override type = 'ChatBox'
 
     getDefaultProps(): IChatBoxShape['props'] {
         return {
@@ -29,7 +29,7 @@ export class ChatBoxShape extends BaseBoxShapeUtil<IChatBoxShape> {
 
     component(shape: IChatBoxShape) {
         return (
-            <chatBox roomId={shape.props.roomId} w={shape.props.w} h={shape.props.h} userName="" />
+            <ChatBox roomId={shape.props.roomId} w={shape.props.w} h={shape.props.h} userName="" />
         )
     }
 }
@@ -44,8 +44,8 @@ interface Message {
 
 
 
-// Update the chatBox component to accept userName
-export const chatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userName }) => {
+// Update the ChatBox component to accept userName
+export const ChatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userName }) => {
     const [messages, setMessages] = useState<Message[]>([]);
     const [inputMessage, setInputMessage] = useState("");
     const [username, setUsername] = useState(userName);

src/tools/ChatBoxTool.ts

@@ -1,7 +1,7 @@
 import { BaseBoxShapeTool } from "tldraw";
 
 export class ChatBoxTool extends BaseBoxShapeTool {
-    static override id = 'chatBox'
-    shapeType = 'chatBox';
+    static override id = 'ChatBox'
+    shapeType = 'ChatBox';
     override initial = 'idle';
 }

src/ui-overrides.tsx

@@ -19,13 +19,13 @@ export const uiOverrides: TLUiOverrides = {
 				editor.setCurrentTool('VideoChat')
 			},
 		}
-		tools.chatBox = {
-			id: 'chatBox',
+		tools.ChatBox = {
+			id: 'ChatBox',
 			icon: 'color',
 			label: 'Chat',
 			kbd: 'x',
 			onSelect: () => {
-				editor.setCurrentTool('chatBox')
+				editor.setCurrentTool('ChatBox')
 			},
 		}
 		return tools
@@ -35,12 +35,12 @@ export const uiOverrides: TLUiOverrides = {
 export const components: TLComponents = {
 	Toolbar: (props) => {
 		const tools = useTools()
-		const isChatBoxSelected = useIsToolSelected(tools['chatBox'])
+		const isChatBoxSelected = useIsToolSelected(tools['ChatBox'])
 		const isVideoSelected = useIsToolSelected(tools['VideoChat'])
 		return (
 			<DefaultToolbar {...props}>
 				<TldrawUiMenuItem {...tools['VideoChat']} isSelected={isVideoSelected} />
-				<TldrawUiMenuItem {...tools['chatBox']} isSelected={isChatBoxSelected} />
+				<TldrawUiMenuItem {...tools['ChatBox']} isSelected={isChatBoxSelected} />
 				<DefaultToolbarContent />
 			</DefaultToolbar>
 		)

worker/TldrawDurableObject.ts

@@ -15,7 +15,7 @@ import { VideoChatShape } from '@/shapes/VideoChatShapeUtil'
 
 // add custom shapes and bindings here if needed:
 export const customSchema = createTLSchema({
-	shapes: { ...defaultShapeSchemas, chatBox: ChatBoxShape, VideoChat: VideoChatShape },
+	shapes: { ...defaultShapeSchemas, ChatBox: ChatBoxShape, VideoChat: VideoChatShape },
 	// bindings: { ...defaultBindingSchemas },
 })