update weave.js to 3.1.0

code/components/actions/color-token-tool/color-token-tool.ts

@@ -137,7 +137,7 @@ export class ColorTokenToolAction extends WeaveAction {
     }
 
     this.instance.emitEvent<ColorTokenToolActionOnAddingEvent>(
-      "onAddingColorToken"
+      "onAddingColorToken",
     );
 
     this.colorTokenId = null;
@@ -166,7 +166,7 @@ export class ColorTokenToolAction extends WeaveAction {
       this.instance.addNode(node, this.container?.getAttrs().id);
 
       this.instance.emitEvent<ColorTokenToolActionOnAddedEvent>(
-        "onAddedColorToken"
+        "onAddedColorToken",
       );
     }
 
@@ -175,7 +175,7 @@ export class ColorTokenToolAction extends WeaveAction {
 
   trigger(
     cancelAction: () => void,
-    params?: ColorTokenToolActionTriggerParams
+    params?: ColorTokenToolActionTriggerParams,
   ) {
     if (!this.instance) {
       throw new Error("Instance not defined");

code/components/actions/image-template-tool/image-template-tool.ts

@@ -157,7 +157,7 @@ export class ImageTemplateToolAction extends WeaveAction {
     this.setCursor();
 
     this.instance.emitEvent<ImageTemplateToolActionOnAddingEvent>(
-      "onAddingImageTemplate"
+      "onAddingImageTemplate",
     );
 
     this.imageTemplateId = null;
@@ -203,7 +203,7 @@ export class ImageTemplateToolAction extends WeaveAction {
       this.container
     ) {
       const { mousePoint } = this.instance.getMousePointerRelativeToContainer(
-        this.container
+        this.container,
       );
 
       const rectPos: Konva.Vector2d = {
@@ -243,7 +243,7 @@ export class ImageTemplateToolAction extends WeaveAction {
       }
 
       this.instance.emitEvent<ImageTemplateToolActionOnAddedEvent>(
-        "onAddedImageTemplate"
+        "onAddedImageTemplate",
       );
     }
 
@@ -264,7 +264,7 @@ export class ImageTemplateToolAction extends WeaveAction {
       this.moved = true;
 
       const { mousePoint } = this.instance.getMousePointerRelativeToContainer(
-        this.measureContainer
+        this.measureContainer,
       );
 
       const deltaX = mousePoint.x - this.clickPoint?.x;

code/components/actions/images-tool/images-tool.ts

@@ -17,6 +17,7 @@ import {
   ImageInfo,
   ImagesToolActionOnAddedImageEvent,
   ImagesToolActionOnAddingImageEvent,
+  // ImagesToolDragAndDropProperties,
 } from "./types";
 import { IMAGES_TOOL_ACTION_NAME, IMAGES_TOOL_STATE } from "./constants";
 
@@ -29,6 +30,7 @@ export class ImagesToolAction extends WeaveAction {
   protected tempImageNode: Konva.Group | null;
   protected pointers: Map<number, Vector2d>;
   protected container: Konva.Layer | Konva.Group | undefined;
+  protected imagesIds: string[] = [];
   protected images: Record<
     string,
     {
@@ -42,6 +44,7 @@ export class ImagesToolAction extends WeaveAction {
   protected preloadImgs: Record<string, HTMLImageElement>;
   protected clickPoint: Vector2d | null;
   protected cancelAction!: () => void;
+  onInit = undefined;
   onPropsChange = undefined;
   update = undefined;
 
@@ -77,26 +80,6 @@ export class ImagesToolAction extends WeaveAction {
     };
   }
 
-  onInit(): void {
-    this.instance.addEventListener("onStageDrop", (e) => {
-      if (window.weaveDragImageURL) {
-        this.instance.getStage().setPointersPositions(e);
-        const position = this.instance.getStage().getRelativePointerPosition();
-        this.instance.triggerAction("imageTool", {
-          imageURL: window.weaveDragImageURL,
-          position,
-        });
-        if (window.weaveDragImageId) {
-          this.instance.updatePropsAction("imageTool", {
-            imageId: window.weaveDragImageId,
-          });
-          window.weaveDragImageId = undefined;
-        }
-        window.weaveDragImageURL = undefined;
-      }
-    });
-  }
-
   private setupEvents() {
     const stage = this.instance.getStage();
 
@@ -190,14 +173,14 @@ export class ImagesToolAction extends WeaveAction {
     this.preloadImgs[imageId].onerror = () => {
       this.instance.emitEvent<ImagesToolActionOnEndLoadImageEvent>(
         "onImageLoadEnd",
-        new Error("Error loading image")
+        new Error("Error loading image"),
       );
       this.cancelAction();
     };
     this.preloadImgs[imageId].onload = () => {
       this.instance.emitEvent<ImagesToolActionOnEndLoadImageEvent>(
         "onImageLoadEnd",
-        undefined
+        undefined,
       );
 
       this.images[imageId].loaded = true;
@@ -277,7 +260,7 @@ export class ImagesToolAction extends WeaveAction {
 
     this.instance.emitEvent<ImagesToolActionOnAddingImageEvent>(
       "onAddingImages",
-      { imagesURL: images }
+      { imagesURL: images },
     );
 
     this.clickPoint = null;
@@ -335,7 +318,7 @@ export class ImagesToolAction extends WeaveAction {
 
     this.instance.emitEvent<ImagesToolActionOnAddedImageEvent>(
       "onAddedImages",
-      { imagesURL: images }
+      { imagesURL: images },
     );
 
     this.setState(IMAGES_TOOL_STATE.FINISHED);
@@ -345,7 +328,7 @@ export class ImagesToolAction extends WeaveAction {
 
   trigger(
     cancelAction: () => void,
-    params: ImagesToolActionTriggerParams
+    params: ImagesToolActionTriggerParams,
   ): void {
     if (!this.instance) {
       throw new Error("Instance not defined");
@@ -363,6 +346,10 @@ export class ImagesToolAction extends WeaveAction {
       selectionPlugin.setSelectedNodes([]);
     }
 
+    if (params.imagesIds) {
+      this.imagesIds = params.imagesIds;
+    }
+
     this.instance.addEventListener("imageLoaded", () => {
       if (this.allImagesLoaded()) {
         this.addImages(params?.position);

code/components/actions/images-tool/types.ts

@@ -21,6 +21,12 @@ export type ImageInfo = {
 
 export type ImagesToolActionTriggerParams = {
   images: ImageInfo[];
+  imagesIds?: string[];
   padding?: number;
   position?: Vector2d;
 };
+
+export type ImagesToolDragAndDropProperties = {
+  imageURL: string;
+  imageId?: string;
+};

code/components/actions/mask-eraser-tool/mask-eraser-tool.ts

@@ -51,21 +51,21 @@ export class MaskEraserToolAction extends WeaveAction {
     stage.container().addEventListener("keydown", (e) => {
       if (e.key === "Backspace" || e.key === "Delete") {
         const maskTransformer: Konva.Transformer | undefined = stage.findOne(
-          "#maskSelectionTransformer"
+          "#maskSelectionTransformer",
         );
 
         if (maskTransformer) {
           const selectedNodes: Konva.Node[] = maskTransformer.getNodes();
           const selectedNodesIds: string[] = selectedNodes.map(
-            (node) => node.getAttrs().id ?? ""
+            (node) => node.getAttrs().id ?? "",
           );
 
           maskTransformer.nodes([
             ...maskTransformer
               .nodes()
               .filter(
                 (node: Konva.Node) =>
-                  !selectedNodesIds.includes(node.getAttrs().id ?? "")
+                  !selectedNodesIds.includes(node.getAttrs().id ?? ""),
               ),
           ]);
           for (const node of selectedNodes) {
@@ -87,11 +87,11 @@ export class MaskEraserToolAction extends WeaveAction {
       (node: Konva.Node) =>
         (node.getType() === "Line" && node.getAttrs().nodeType === "mask") ||
         (node.getType() === "Group" &&
-          node.getAttrs().nodeType === "fuzzy-mask")
+          node.getAttrs().nodeType === "fuzzy-mask"),
     );
 
     const maskTransformer: Konva.Transformer | undefined = stage.findOne(
-      "#maskSelectionTransformer"
+      "#maskSelectionTransformer",
     );
 
     for (const node of nodes) {

code/components/room-components/ai-components/chatbot.conversation.tsx

@@ -39,6 +39,11 @@
 import { useCollaborationRoom } from "@/store/store";
 import { Button } from "@/components/ui/button";
 import { usePromptInputAttachments } from "@/components/ai-elements/prompt-input";
+import {
+  IMAGE_TOOL_ACTION_NAME,
+  WeaveImageToolAction,
+} from "@inditextech/weave-sdk";
+import { useWeave } from "@inditextech/weave-react";
 
 type ChatBotConversationProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -48,6 +53,8 @@
 export const ChatBotConversation = ({
   initialMessages,
 }: ChatBotConversationProps) => {
+  const instance = useWeave((state) => state.instance);
+
   const room = useCollaborationRoom((state) => state.room);
 
   const threadId = useIAChat((state) => state.threadId);
@@ -84,8 +91,25 @@
         className="gap-4"
         onDragStart={(e) => {
           if (e.target instanceof HTMLImageElement) {
-            window.weaveDragImageURL = e.target.src;
-            window.weaveDragImageId = e.target.dataset.imageId;
+            if (!instance) {
+              return;
+            }
+            if (e.target instanceof HTMLImageElement) {
+              const imageTool = instance.getActionHandler(
+                IMAGE_TOOL_ACTION_NAME,
+              ) as WeaveImageToolAction | undefined;
+
+              if (!imageTool) {
+                return;
+              }
+
+              imageTool.setDragAndDropProperties({
+                imageURL: e.target.src,
+                imageId: e.target.dataset.imageId,
+                imageWidth: e.target.naturalWidth,
+                imageHeight: e.target.naturalHeight,
+              });
+            }
           }
         }}
       >
@@ -98,7 +122,7 @@
         )}
         {messages?.map((message, messageIndex) => {
           const attachments = message.parts.filter(
-            (part) => part.type === "file"
+            (part) => part.type === "file",
           );
 
           return (
@@ -171,19 +195,19 @@
                                             className="rounded-none !cursor-pointer uppercase !text-xs w-[40px]"
                                             onClick={async () => {
                                               const blob = await fetch(
-                                                image.url
+                                                image.url,
                                               ).then((res) => res.blob());
 
                                               const file = new File(
                                                 [blob],
                                                 "image.png",
                                                 {
                                                   type: "image/png",
-                                                }
+                                                },
                                               );
 
                                               promptInputAttachmentsController.add(
-                                                [file]
+                                                [file],
                                               );
                                             }}
                                           >

code/components/room-components/ai-components/chatbot.prompt.tsx

@@ -101,7 +101,7 @@ const ChatBotPrompt = () => {
   const chefs = Array.from(new Set(MODELS.map((model) => model.chef)));
 
   const setSidebarActive = useCollaborationRoom(
-    (state) => state.setSidebarActive
+    (state) => state.setSidebarActive,
   );
 
   const handleSubmit = React.useCallback(
@@ -146,29 +146,37 @@ const ChatBotPrompt = () => {
       setAiView,
       setSidebarActive,
       scrollToBottom,
-    ]
+    ],
   );
 
   const attachments = usePromptInputAttachments();
 
   return (
     <div
       className={cn(
-        "pointer-events-none fixed bottom-[10px] left-[20px] right-[500px] flex justify-center items-center",
+        "pointer-events-none fixed left-[16px] right-[16px] flex justify-center items-center",
         {
-          ["bottom-[-124px]"]: hidden,
-          ["bottom-[10px]"]: !hidden,
-        }
+          ["bottom-[-134px]"]: hidden,
+          ["bottom-[16px]"]: !hidden,
+        },
       )}
     >
       <div className="relative w-[900px] pointer-events-auto border border-[#c9c9c9]">
         {hidden && (
-          <button
-            className="absolute top-[-40px] right-0 px-5 py-3 bg-white rounded-none border border-[#c9c9c9] cursor-pointer"
-            onClick={() => setHidden(false)}
-          >
-            <PanelBottomOpen strokeWidth={1} size={16} />
-          </button>
+          <div className="absolute top-[-40px] left-0 right-0 flex justify-center items-center">
+            <button
+              className={cn(
+                "bg-white rounded-none border border-[#c9c9c9] cursor-pointer",
+                {
+                  ["px-3 py-2"]: hidden,
+                  ["px-5 py-3"]: !hidden,
+                },
+              )}
+              onClick={() => setHidden(false)}
+            >
+              <PanelBottomOpen strokeWidth={1} size={16} />
+            </button>
+          </div>
         )}
         {attachments.files.length > 0 && (
           <div className="w-full bg-white border-b border-[#c9c9c9] p-3">
@@ -240,7 +248,7 @@ const ChatBotPrompt = () => {
                                 <div className="ml-auto size-4" />
                               )}
                             </ModelSelectorItem>
-                          )
+                          ),
                         )}
                       </ModelSelectorGroup>
                     ))}