@whoz-oss/coday-web 0.13.3 → 0.15.0

package/client/app.js

@@ -114,7 +114,7 @@ var ToolRequestEvent = class _ToolRequestEvent extends CodayEvent {
     this.length = this.args.length + this.name.length + this.toolRequestId.length + 20;
   }
   buildResponse(output) {
-    return new ToolResponseEvent({ output, toolRequestId: this.toolRequestId });
+    return new ToolResponseEvent({ output, toolRequestId: this.toolRequestId, parentKey: this.timestamp });
   }
   /**
    * Renders the tool request as a single line string with truncation
@@ -134,7 +134,33 @@ var ToolResponseEvent = class _ToolResponseEvent extends CodayEvent {
     super(event, _ToolResponseEvent.type);
     this.toolRequestId = event.toolRequestId || this.timestamp || (/* @__PURE__ */ new Date()).toISOString();
     this.output = event.output;
-    this.length = this.output.length + this.toolRequestId.length + 20;
+    if (typeof this.output === "string") {
+      this.length = this.output.length + this.toolRequestId.length + 20;
+    } else {
+      if (this.output.type === "text") {
+        this.length = this.output.content.length + this.toolRequestId.length + 20;
+      } else if (this.output.type === "image") {
+        const tokens = (this.output.width ?? 0) * (this.output.height ?? 0) / 750;
+        this.length = (tokens ? tokens * 3.5 : this.output.content.length) + this.toolRequestId.length + 20;
+      } else {
+        this.length = this.toolRequestId.length + 20;
+      }
+    }
+  }
+  /**
+   * Get the text content as a string for backward compatibility
+   */
+  getTextOutput() {
+    if (typeof this.output === "string") {
+      return this.output;
+    }
+    if (this.output.type === "text") {
+      return this.output.content;
+    }
+    if (this.output.type === "image") {
+      return `[Image: ${this.output.mimeType}]`;
+    }
+    return "";
   }
   /**
    * Renders the tool response as a single line string with truncation
@@ -142,8 +168,10 @@ var ToolResponseEvent = class _ToolResponseEvent extends CodayEvent {
    * @returns A formatted string representation
    */
   toSingleLineString(maxLength = 50) {
-    const truncatedOutput = truncateText(this.output, maxLength);
-    return `\u2B91 ${truncatedOutput}`;
+    const textOutput = this.getTextOutput();
+    const truncatedOutput = truncateText(textOutput, maxLength);
+    const imageIndicator = typeof this.output !== "string" && this.output.type === "image" ? " [image]" : "";
+    return `\u2B91 ${truncatedOutput}${imageIndicator}`;
   }
 };
 var ProjectSelectedEvent = class _ProjectSelectedEvent extends CodayEvent {
@@ -171,7 +199,19 @@ var MessageEvent = class _MessageEvent extends CodayEvent {
     this.role = event.role;
     this.name = event.name;
     this.content = event.content;
-    this.length = this.content.length + this.role.length + this.name.length + 20;
+    this.length = this.content.map((content) => {
+      if (content.type === "text") {
+        return content.content.length;
+      }
+      if (content.type === "image") {
+        const tokens = (content.width || 0) * (content.height || 0) / 750;
+        return tokens ? tokens * 3.5 : content.content.length;
+      }
+      return 0;
+    }).reduce((sum, length) => sum + length, 0);
+  }
+  getTextContent() {
+    return this.content.filter((c) => c.type === "text").map((c) => c.content).join("\n");
   }
 };
 var eventTypeToClassMap = {
@@ -222,7 +262,7 @@ var SpeechToTextareaComponent = class {
     this.chatTextarea = chatTextarea;
     this.submitButton = submitButton;
     this.initializeVoiceInput();
-    window.addEventListener("voiceLanguageChanged", (event) => {
+    window.addEventListener("voiceLanguageChanged", (_event) => {
       this.updateRecognitionLanguage();
     });
   }
@@ -719,6 +759,71 @@ var ChoiceSelectComponent = class {
   }
 };
 
+// apps/web/client/image-upload/image-upload-handler.ts
+var ImageUploadHandler = class {
+  constructor(clientId2) {
+    this.clientId = clientId2;
+  }
+  maxFileSize = 5 * 1024 * 1024;
+  // 5MB
+  supportedTypes = ["image/png", "image/jpeg", "image/gif", "image/webp"];
+  /**
+   * Validates an image file
+   */
+  validateFile(file) {
+    if (!this.supportedTypes.includes(file.type)) {
+      throw new Error(`Unsupported file type: ${file.type}`);
+    }
+    if (file.size > this.maxFileSize) {
+      throw new Error(`File too large: ${(file.size / 1024 / 1024).toFixed(1)}MB exceeds 5MB limit`);
+    }
+  }
+  /**
+   * Converts a File to base64 string
+   */
+  async fileToBase64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result;
+        if (!result) {
+          reject(new Error("Failed to read file"));
+          return;
+        }
+        const base64 = result.split(",")[1];
+        if (!base64) {
+          reject(new Error("Invalid file format"));
+          return;
+        }
+        resolve(base64);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }
+  /**
+   * Uploads an image file to the server
+   */
+  async uploadImage(file) {
+    this.validateFile(file);
+    const content = await this.fileToBase64(file);
+    const response = await fetch(`/api/files/upload`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        clientId: this.clientId,
+        content,
+        mimeType: file.type,
+        filename: file.name
+      })
+    });
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.error || "Upload failed");
+    }
+  }
+};
+
 // apps/web/client/chat-history/chat-history.component.ts
 var PARAGRAPH_MIN_LENGTH = 80;
 var MAX_PARAGRAPHS = 3;
@@ -737,6 +842,8 @@ var ChatHistoryComponent = class {
     window.addEventListener("voiceReadFullTextChanged", (event) => {
       this.readFullText = event.detail;
     });
+    this.imageUploadHandler = new ImageUploadHandler(this.getClientId());
+    this.setupDragAndDrop();
     setInterval(() => {
       this.checkStateConsistency();
     }, 1e3);
@@ -749,9 +856,18 @@ var ChatHistoryComponent = class {
   onStopCallback;
   readFullText = false;
   currentPlayingButton = null;
+  imageUploadHandler;
   handle(event) {
     this.history.set(event.timestamp, event);
-    if (event instanceof TextEvent) {
+    if (event instanceof MessageEvent) {
+      if (event.role === "user") {
+        this.addUserMessage(event);
+      } else {
+        this.voiceSynthesis.stopSpeech();
+        this.resetAllPlayButtons();
+        this.addAssistantMessage(event);
+      }
+    } else if (event instanceof TextEvent) {
       if (event.speaker) {
         this.voiceSynthesis.stopSpeech();
         this.resetAllPlayButtons();
@@ -934,6 +1050,131 @@ var ChatHistoryComponent = class {
       this.resetAllPlayButtons();
     }
   }
+  addUserMessage(event) {
+    const newEntry = this.createRichMessageElement(event);
+    newEntry.classList.add("text", "right");
+    const buttonContainer = document.createElement("div");
+    buttonContainer.classList.add("message-button-container");
+    const textContent = this.extractTextContent(event);
+    if (textContent) {
+      const playButton = this.createPlayButton(textContent);
+      buttonContainer.appendChild(playButton);
+    }
+    const copyButton = document.createElement("button");
+    copyButton.classList.add("copy-button");
+    copyButton.title = "Copy raw message";
+    copyButton.textContent = "\u{1F4CB}";
+    copyButton.addEventListener("click", (event2) => {
+      event2.stopPropagation();
+      this.copyToClipboard(textContent);
+      const clickedButton = event2.currentTarget;
+      if (clickedButton) {
+        document.querySelectorAll(".copy-button.active").forEach((btn) => {
+          btn.classList.remove("active");
+          btn.textContent = "\u{1F4CB}";
+        });
+        clickedButton.classList.add("active");
+        clickedButton.textContent = "\u2713";
+        setTimeout(() => {
+          clickedButton.classList.remove("active");
+          clickedButton.textContent = "\u{1F4CB}";
+        }, 2e3);
+      }
+    });
+    buttonContainer.appendChild(copyButton);
+    newEntry.appendChild(buttonContainer);
+    this.appendMessageElement(newEntry);
+  }
+  addAssistantMessage(event) {
+    const newEntry = this.createRichMessageElement(event);
+    newEntry.classList.add("text", "left");
+    newEntry.addEventListener("click", () => {
+      this.voiceSynthesis.stopSpeech();
+    });
+    const buttonContainer = document.createElement("div");
+    buttonContainer.classList.add("message-button-container");
+    const textContent = this.extractTextContent(event);
+    if (textContent) {
+      const playButton = this.createPlayButton(textContent);
+      buttonContainer.appendChild(playButton);
+    }
+    const copyButton = document.createElement("button");
+    copyButton.classList.add("copy-button");
+    copyButton.title = "Copy raw response";
+    copyButton.textContent = "\u{1F4CB}";
+    copyButton.addEventListener("click", (event2) => {
+      event2.stopPropagation();
+      this.copyToClipboard(textContent);
+      const clickedButton = event2.currentTarget;
+      if (clickedButton) {
+        document.querySelectorAll(".copy-button.active").forEach((btn) => {
+          btn.classList.remove("active");
+          btn.textContent = "\u{1F4CB}";
+        });
+        clickedButton.classList.add("active");
+        clickedButton.textContent = "\u2713";
+        setTimeout(() => {
+          clickedButton.classList.remove("active");
+          clickedButton.textContent = "\u{1F4CB}";
+        }, 2e3);
+      }
+    });
+    buttonContainer.appendChild(copyButton);
+    newEntry.appendChild(buttonContainer);
+    this.appendMessageElement(newEntry);
+    const audioEnabled = getPreference("voiceAnnounceEnabled", false) || false;
+    if (audioEnabled && this.isMessageRecentEnoughForAnnouncement(event.timestamp)) {
+      this.announceText(textContent);
+    }
+  }
+  createRichMessageElement(event) {
+    const newEntry = document.createElement("div");
+    newEntry.classList.add("message");
+    const speakerElement = document.createElement("div");
+    speakerElement.classList.add("speaker");
+    speakerElement.textContent = event.name;
+    newEntry.appendChild(speakerElement);
+    const contentContainer = document.createElement("div");
+    contentContainer.classList.add("message-content");
+    event.content.forEach((content) => {
+      if (content.type === "text") {
+        const textDiv = document.createElement("div");
+        textDiv.classList.add("text-part");
+        const parsed = marked.parse(content.content);
+        if (parsed instanceof Promise) {
+          parsed.then((html) => {
+            textDiv.innerHTML = html;
+          });
+        } else {
+          textDiv.innerHTML = parsed;
+        }
+        contentContainer.appendChild(textDiv);
+      } else if (content.type === "image") {
+        const img = document.createElement("img");
+        img.src = `data:${content.mimeType};base64,${content.content}`;
+        img.alt = content.source || "Image";
+        img.classList.add("message-image");
+        img.style.maxWidth = "100%";
+        img.style.height = "auto";
+        img.style.margin = "8px 0";
+        img.style.borderRadius = "4px";
+        img.style.cursor = "pointer";
+        img.addEventListener("click", (e) => {
+          e.stopPropagation();
+          window.open(img.src, "_blank");
+        });
+        contentContainer.appendChild(img);
+      }
+    });
+    newEntry.appendChild(contentContainer);
+    return newEntry;
+  }
+  /**
+   * Extract all text content from a MessageEvent for voice synthesis and copying
+   */
+  extractTextContent(event) {
+    return event.content.filter((content) => content.type === "text").map((content) => content.content).join("\n\n");
+  }
   createMessageElement(content, speaker) {
     const newEntry = document.createElement("div");
     newEntry.classList.add("message");
@@ -1032,6 +1273,75 @@ var ChatHistoryComponent = class {
       return true;
     }
   }
+  setupDragAndDrop() {
+    this.chatHistory.addEventListener("dragenter", this.handleDragEnter.bind(this));
+    this.chatHistory.addEventListener("dragover", this.handleDragOver.bind(this));
+    this.chatHistory.addEventListener("dragleave", this.handleDragLeave.bind(this));
+    this.chatHistory.addEventListener("drop", this.handleDrop.bind(this));
+  }
+  handleDragEnter(e) {
+    e.preventDefault();
+    if (this.hasImageFiles(e.dataTransfer)) {
+      this.chatHistory.classList.add("drag-over");
+    }
+  }
+  handleDragOver(e) {
+    e.preventDefault();
+    if (this.hasImageFiles(e.dataTransfer)) {
+      e.dataTransfer.dropEffect = "copy";
+    }
+  }
+  handleDragLeave(e) {
+    if (e.target === this.chatHistory) {
+      this.chatHistory.classList.remove("drag-over");
+    }
+  }
+  async handleDrop(e) {
+    e.preventDefault();
+    this.chatHistory.classList.remove("drag-over");
+    const files = Array.from(e.dataTransfer?.files || []);
+    const imageFiles = files.filter((f) => f.type.startsWith("image/"));
+    for (const file of imageFiles) {
+      try {
+        this.showUploadStatus(`Uploading ${file.name}...`);
+        await this.imageUploadHandler.uploadImage(file);
+        this.hideUploadStatus();
+      } catch (error) {
+        console.error("Upload error:", error);
+        this.showUploadError(`Failed to upload ${file.name}: ${error.message}`);
+      }
+    }
+  }
+  hasImageFiles(dataTransfer) {
+    if (!dataTransfer) return false;
+    return Array.from(dataTransfer.types).includes("Files");
+  }
+  showUploadStatus(message) {
+    this.hideUploadStatus();
+    const statusDiv = document.createElement("div");
+    statusDiv.classList.add("upload-status");
+    statusDiv.textContent = message;
+    statusDiv.id = "upload-status";
+    this.chatHistory.appendChild(statusDiv);
+    this.scrollToBottom();
+  }
+  hideUploadStatus() {
+    const existing = document.getElementById("upload-status");
+    if (existing) {
+      existing.remove();
+    }
+  }
+  showUploadError(message) {
+    this.hideUploadStatus();
+    const errorDiv = document.createElement("div");
+    errorDiv.classList.add("upload-status", "error");
+    errorDiv.textContent = message;
+    this.chatHistory.appendChild(errorDiv);
+    this.scrollToBottom();
+    setTimeout(() => {
+      errorDiv.remove();
+    }, 5e3);
+  }
   announceText(text) {
     const mode = getPreference("voiceMode", "speech") || "speech";
     if (mode === "notification") {
@@ -1142,7 +1452,7 @@ var VoiceSynthesisComponent = class {
     }
   }
   extractPlainText(text) {
-    let processed = text.replace(/[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|⭐/gu, "").replace(/```[\s\S]*?```/g, "code block").replace(/`([^`]+)`/g, "$1").replace(/\*\*\*(.*?)\*\*\*/g, "$1").replace(/\*\*(.*?)\*\*/g, "$1").replace(/\*(.*?)\*/g, "$1").replace(/~~(.*?)~~/g, "$1").replace(/#{1,6}\s*(.*)/g, "$1").replace(/\[([^\]]+)\]\([^\)]+\)/g, "$1").replace(/https?:\/\/[^\s]+/g, "link").replace(/&nbsp;/g, " ").replace(/&amp;/g, "and").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"');
+    let processed = text.replace(/[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|⭐/gu, "").replace(/```[\s\S]*?```/g, "code block").replace(/`([^`]+)`/g, "$1").replace(/\*\*\*(.*?)\*\*\*/g, "$1").replace(/\*\*(.*?)\*\*/g, "$1").replace(/\*(.*?)\*/g, "$1").replace(/~~(.*?)~~/g, "$1").replace(/#{1,6}\s*(.*)/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/https?:\/\/[^\s]+/g, "link").replace(/&nbsp;/g, " ").replace(/&amp;/g, "and").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"');
     processed = this.addNaturalPunctuation(processed);
     return processed.replace(/\s+/g, " ").trim();
   }
@@ -1234,6 +1544,9 @@ var VoiceSynthesisComponent = class {
       this.stopSpeech();
       const langCode = this.selectedVoice.lang.slice(0, 2);
       const testText = TestTexts[langCode] || TestTexts["en"];
+      if (!testText) {
+        return;
+      }
       this.speak(testText);
     }, 100);
   }