feat: enhance canvas and layout components with new features and improvements

- Added remote image patterns to the Next.js configuration for enhanced image handling.
- Updated TypeScript configuration to exclude the 'implement' directory.
- Refactored layout component to fetch initial authentication token and pass it to Providers.
- Replaced CanvasToolbar with CanvasSidebar for improved UI layout and functionality.
- Enhanced Canvas component with new drag-and-drop file upload capabilities and batch node movement.
- Updated various node components to support new status handling and improved user interactions.
- Added debounced saving for note and prompt nodes to optimize performance.

components/canvas/nodes/prompt-node.tsx

@@ -1,28 +1,103 @@
 "use client";
 
-import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
-
+import { useState, useCallback, useEffect } from "react";
+import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
+import { useMutation } from "convex/react";
+import { api } from "@/convex/_generated/api";
+import type { Id } from "@/convex/_generated/dataModel";
+import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import BaseNodeWrapper from "./base-node-wrapper";
 
-export type PromptNodeData = {
-  content?: string;
+type PromptNodeData = {
+  prompt?: string;
   model?: string;
+  _status?: string;
+  _statusMessage?: string;
 };
 
 export type PromptNode = Node<PromptNodeData, "prompt">;
 
-export default function PromptNode({ data, selected }: NodeProps<PromptNode>) {
+export default function PromptNode({
+  id,
+  data,
+  selected,
+}: NodeProps<PromptNode>) {
+  const updateData = useMutation(api.nodes.updateData);
+  const [prompt, setPrompt] = useState(data.prompt ?? "");
+  const [isEditing, setIsEditing] = useState(false);
+
+  useEffect(() => {
+    if (!isEditing) {
+      setPrompt(data.prompt ?? "");
+    }
+  }, [data.prompt, isEditing]);
+
+  const savePrompt = useDebouncedCallback(
+    (newPrompt: string) => {
+      updateData({
+        nodeId: id as Id<"nodes">,
+        data: {
+          ...data,
+          prompt: newPrompt,
+          _status: undefined,
+          _statusMessage: undefined,
+        },
+      });
+    },
+    500,
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newPrompt = e.target.value;
+      setPrompt(newPrompt);
+      savePrompt(newPrompt);
+    },
+    [savePrompt],
+  );
+
   return (
-    <BaseNodeWrapper selected={selected} className="w-72 border-purple-500/30 p-3">
-      <div className="mb-1 text-xs font-medium text-purple-500">Prompt</div>
-      <p className="min-h-[2rem] whitespace-pre-wrap text-sm">{data.content || "Prompt eingeben..."}</p>
-      {data.model ? (
-        <div className="mt-2 text-xs text-muted-foreground">Modell: {data.model}</div>
-      ) : null}
+    <BaseNodeWrapper
+      selected={selected}
+      status={data._status}
+      className="border-purple-500/30"
+    >
+      <div className="w-72 p-3">
+        <div className="text-xs font-medium text-purple-500 mb-1">
+          ✨ Prompt
+        </div>
+        {isEditing ? (
+          <textarea
+            value={prompt}
+            onChange={handleChange}
+            onBlur={() => setIsEditing(false)}
+            autoFocus
+            className="nodrag nowheel w-full resize-none rounded-md border-0 bg-transparent p-0 text-sm outline-none focus:ring-0 min-h-[3rem]"
+            placeholder="Prompt eingeben…"
+            rows={4}
+          />
+        ) : (
+          <div
+            onDoubleClick={() => setIsEditing(true)}
+            className="min-h-[2rem] cursor-text text-sm whitespace-pre-wrap"
+          >
+            {prompt || (
+              <span className="text-muted-foreground">
+                Doppelklick zum Bearbeiten
+              </span>
+            )}
+          </div>
+        )}
+        {data.model && (
+          <div className="mt-2 text-xs text-muted-foreground">
+            Modell: {data.model}
+          </div>
+        )}
+      </div>
       <Handle
         type="source"
         position={Position.Right}
-        className="!h-3 !w-3 !border-2 !border-background !bg-purple-500"
+        className="!h-3 !w-3 !bg-purple-500 !border-2 !border-background"
       />
     </BaseNodeWrapper>
   );