make send wav audio file works now

public/chatclient/app.js

@@ -25,6 +25,7 @@ const settingsToggle = document.querySelector("#settings-toggle");
 const statusLine = document.querySelector("#status-line");
 const sendButton = document.querySelector("#send-button");
 const responseOutput = document.querySelector("#response-output");
+const rawCopyButton = document.querySelector("#raw-copy-button");
 const rawJson = document.querySelector("#raw-json");
 const errorToast = document.querySelector("#error-toast");
 const previewController = createAttachmentPreviewController();
@@ -41,10 +42,10 @@ function bindEvents() {
   audioOutputInput.addEventListener("change", syncAudioFields);
   attachmentInput.addEventListener("change", handleAttachmentSelect);
   document.querySelector("#attachment-trigger").addEventListener("click", () => toggleAttachmentPicker());
-  document.querySelector("#attachment-upload-trigger").addEventListener("click", () => attachmentInput.click());
   document.querySelector("#attachment-link-add").addEventListener("click", handleLinkAdd);
   attachmentLinkUrl.addEventListener("keydown", handleLinkKeyDown);
   document.querySelector("#send-button").addEventListener("click", handleSend);
+  rawCopyButton.addEventListener("click", handleRawCopy);
   document.querySelector(".editor-toolbar").addEventListener("click", handleFormatClick);
   editor.addEventListener("keydown", handleEditorKeyDown);
   editor.addEventListener("input", persistDraft);
@@ -54,7 +55,7 @@ function bindEvents() {
   }
 
   for (const button of document.querySelectorAll(".picker-mode-button")) {
-    button.addEventListener("click", () => setAttachmentMode(button.dataset.mode));
+    button.addEventListener("click", () => handleAttachmentModeSelect(button.dataset.mode));
   }
 
   for (const element of [endpointInput, modelInput, systemPromptInput, attachmentLinkType]) {
@@ -108,6 +109,13 @@ function setAttachmentMode(mode) {
   persistDraft();
 }
 
+function handleAttachmentModeSelect(mode) {
+  setAttachmentMode(mode);
+  if (mode === "upload") {
+    attachmentInput.click();
+  }
+}
+
 function setActiveTab(tabName) {
   for (const button of document.querySelectorAll(".tab-button")) {
     const isActive = button.dataset.tab === tabName;
@@ -140,9 +148,9 @@ function handleEditorKeyDown(event) {
   }
 }
 
-function handleAttachmentSelect(event) {
+async function handleAttachmentSelect(event) {
   try {
-    const nextItems = createAttachments(event.target.files);
+    const nextItems = await createAttachments(event.target.files);
     if (nextItems.length === 0) {
       return;
     }
@@ -233,6 +241,7 @@ async function handleSend() {
 async function buildPayload() {
   const text = readEditorText();
   const content = [];
+  const hasAudioAttachment = state.attachments.some((attachment) => attachment.kind === "audio");
 
   if (text) {
     content.push({ type: "text", text });
@@ -248,6 +257,10 @@ async function buildPayload() {
     messages: []
   };
 
+  if (hasAudioAttachment) {
+    payload.modalities = ["text", "audio"];
+  }
+
   if (!payload.model) {
     throw new Error("Enter a model name in settings.");
   }
@@ -337,3 +350,21 @@ function renderRequestError(error, stage) {
 function showPendingOutput() {
   responseOutput.innerHTML = '<p class="empty-state">Sending request...</p>';
 }
+
+async function handleRawCopy() {
+  try {
+    await navigator.clipboard.writeText(rawJson.textContent);
+    setStatus(statusLine, "Raw response copied.", true);
+    rawCopyButton.textContent = "Copied";
+  } catch (_error) {
+    showError(errorToast, "Failed to copy raw response.");
+    rawCopyButton.textContent = "Copy Failed";
+  }
+
+  window.clearTimeout(handleRawCopy.timer);
+  handleRawCopy.timer = window.setTimeout(() => {
+    rawCopyButton.textContent = "Copy Raw";
+  }, 1600);
+}
+
+handleRawCopy.timer = 0;

public/chatclient/draft.js

@@ -1,3 +1,5 @@
+import { hydrateAttachment } from "/chatclient/media.js";
+
 const DRAFT_KEY = "oapix.chatclient.draft";
 
 export function loadDraft() {
@@ -17,23 +19,28 @@ export function loadDraft() {
 }
 
 export function saveDraft({ editor, attachmentMode, attachmentLinkType, attachmentLinkUrl, attachments }) {
-  window.localStorage.setItem(DRAFT_KEY, JSON.stringify({
-    editorHtml: editor.innerHTML,
-    attachmentMode,
-    attachmentLinkType,
-    attachmentLinkUrl,
-    attachments: attachments
-      .filter((attachment) => attachment.sourceType === "link")
-      .map((attachment) => ({
-        id: attachment.id,
-        kind: attachment.kind,
-        name: attachment.name,
-        sizeLabel: attachment.sizeLabel,
-        previewUrl: attachment.previewUrl,
-        sourceType: attachment.sourceType,
-        url: attachment.url
-      }))
-  }));
+  try {
+    window.localStorage.setItem(DRAFT_KEY, JSON.stringify({
+      editorHtml: editor.innerHTML,
+      attachmentMode,
+      attachmentLinkType,
+      attachmentLinkUrl,
+      attachments: attachments
+        .map((attachment) => serializeAttachment(attachment))
+        .filter(Boolean)
+    }));
+  } catch (_error) {
+    window.localStorage.setItem(DRAFT_KEY, JSON.stringify({
+      editorHtml: editor.innerHTML,
+      attachmentMode,
+      attachmentLinkType,
+      attachmentLinkUrl,
+      attachments: attachments
+        .filter((attachment) => attachment.sourceType === "link")
+        .map((attachment) => serializeAttachment(attachment))
+        .filter(Boolean)
+    }));
+  }
 }
 
 export function clearDraft() {
@@ -45,13 +52,9 @@ function sanitizeAttachments(value) {
     return [];
   }
 
-  return value.filter((attachment) => {
-    return attachment
-      && attachment.sourceType === "link"
-      && (attachment.kind === "image" || attachment.kind === "audio")
-      && typeof attachment.url === "string"
-      && typeof attachment.name === "string";
-  });
+  return value
+    .map((attachment) => sanitizeAttachment(attachment))
+    .filter(Boolean);
 }
 
 function emptyDraft() {
@@ -63,3 +66,51 @@ function emptyDraft() {
     attachments: []
   };
 }
+
+function serializeAttachment(attachment) {
+  if (!attachment || (attachment.kind !== "image" && attachment.kind !== "audio")) {
+    return null;
+  }
+
+  if (attachment.sourceType === "link") {
+    return {
+      id: attachment.id,
+      kind: attachment.kind,
+      name: attachment.name,
+      sizeLabel: attachment.sizeLabel,
+      previewUrl: attachment.previewUrl,
+      sourceType: "link",
+      url: attachment.url
+    };
+  }
+
+  if (attachment.sourceType === "file" && typeof attachment.dataUrl === "string") {
+    return {
+      id: attachment.id,
+      kind: attachment.kind,
+      name: attachment.name,
+      sizeLabel: attachment.sizeLabel,
+      sourceType: "file",
+      dataUrl: attachment.dataUrl,
+      mimeType: attachment.mimeType
+    };
+  }
+
+  return null;
+}
+
+function sanitizeAttachment(attachment) {
+  if (!attachment || (attachment.kind !== "image" && attachment.kind !== "audio") || typeof attachment.name !== "string") {
+    return null;
+  }
+
+  if (attachment.sourceType === "link" && typeof attachment.url === "string") {
+    return hydrateAttachment(attachment);
+  }
+
+  if (attachment.sourceType === "file" && typeof attachment.dataUrl === "string") {
+    return hydrateAttachment(attachment);
+  }
+
+  return null;
+}

public/chatclient/index.html

@@ -51,19 +51,6 @@
             ></div>
           </article>
 
-          <section class="attachments-card" aria-labelledby="attachments-heading" hidden>
-            <div class="section-head">
-              <div>
-                <p class="eyebrow">Attachments</p>
-                <h3 id="attachments-heading">Image and Audio Attachments</h3>
-              </div>
-              <p id="attachment-summary" class="section-copy">No files added.</p>
-            </div>
-            <div id="attachment-list" class="attachment-list">
-              <p class="empty-state">Add an image or audio file or link to include it with the next request.</p>
-            </div>
-          </section>
-
           <div class="tool-row" aria-label="Request tools">
             <button id="settings-toggle" class="tool-button icon-button" type="button" aria-label="Open settings" title="Settings">
               <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -108,8 +95,7 @@
             </div>
 
             <div id="attachment-picker-upload" class="picker-panel is-active">
-              <p class="picker-copy">Select one or more image/audio files from this device.</p>
-              <button id="attachment-upload-trigger" class="picker-action-button" type="button">Choose Files</button>
+              <p class="picker-copy">Click <strong>Upload Files</strong> above to open the system picker immediately.</p>
             </div>
 
             <div id="attachment-picker-link" class="picker-panel" hidden>
@@ -132,6 +118,19 @@
             </div>
           </section>
 
+          <section class="attachments-card" aria-labelledby="attachments-heading">
+            <div class="section-head">
+              <div>
+                <p class="eyebrow">Attachments</p>
+                <h3 id="attachments-heading">Image and Audio Attachments</h3>
+              </div>
+              <p id="attachment-summary" class="section-copy">No files added.</p>
+            </div>
+            <div id="attachment-list" class="attachment-list">
+              <p class="empty-state">Add an image or audio file or link to include it with the next request.</p>
+            </div>
+          </section>
+
           <section id="settings-panel" class="settings-panel" hidden>
             <div class="section-head">
               <div>
@@ -199,8 +198,9 @@
                 <p class="eyebrow">Debug</p>
                 <h3>Raw Response</h3>
               </div>
-              <p class="section-copy">This tab shows the exact JSON returned by the proxy.</p>
+              <button id="raw-copy-button" class="secondary-button" type="button">Copy Raw</button>
             </div>
+            <p class="section-copy">This tab shows the exact JSON returned by the proxy.</p>
             <pre id="raw-json" class="raw-output">{}</pre>
           </article>
         </section>

public/chatclient/media.js

@@ -1,8 +1,8 @@
 const IMAGE_PREFIX = "image/";
 const AUDIO_PREFIX = "audio/";
 
-export function createAttachments(fileList) {
-  return Array.from(fileList, (file) => createFileAttachment(file));
+export async function createAttachments(fileList) {
+  return Promise.all(Array.from(fileList, (file) => createFileAttachment(file)));
 }
 
 export function createLinkAttachment(kind, url) {
@@ -31,21 +31,44 @@ export async function buildAttachmentParts(attachments) {
 }
 
 export function releaseAttachment(attachment) {
-  if (attachment?.sourceType === "file" && attachment.previewUrl) {
+  if (attachment?.sourceType === "file" && attachment.previewUrl?.startsWith("blob:")) {
     URL.revokeObjectURL(attachment.previewUrl);
   }
 }
 
-function createFileAttachment(file) {
+export function hydrateAttachment(savedAttachment) {
+  if (savedAttachment?.sourceType === "link") {
+    return savedAttachment;
+  }
+
+  if (savedAttachment?.sourceType === "file" && typeof savedAttachment.dataUrl === "string") {
+    return {
+      id: savedAttachment.id,
+      kind: savedAttachment.kind,
+      name: savedAttachment.name,
+      sizeLabel: savedAttachment.sizeLabel,
+      previewUrl: savedAttachment.dataUrl,
+      sourceType: "file",
+      dataUrl: savedAttachment.dataUrl,
+      mimeType: savedAttachment.mimeType
+    };
+  }
+
+  return null;
+}
+
+async function createFileAttachment(file) {
   const kind = classifyFile(file);
+  const dataUrl = await readFileAsDataUrl(file);
   return {
     id: crypto.randomUUID(),
-    file,
     kind,
     name: file.name,
     sizeLabel: formatBytes(file.size),
-    previewUrl: URL.createObjectURL(file),
-    sourceType: "file"
+    previewUrl: dataUrl,
+    sourceType: "file",
+    dataUrl,
+    mimeType: file.type
   };
 }
 
@@ -60,7 +83,7 @@ async function buildAttachmentPart(attachment) {
     return {
       type: "image_url",
       image_url: {
-        url: await readFileAsDataUrl(attachment.file)
+        url: attachment.dataUrl ?? await readFileAsDataUrl(attachment.file)
       }
     };
   }
@@ -68,8 +91,8 @@ async function buildAttachmentPart(attachment) {
   return {
     type: "input_audio",
     input_audio: {
-      data: await readFileAsBase64(attachment.file),
-      format: inferAudioFormat(attachment.file)
+      data: extractBase64(attachment.dataUrl ?? await readFileAsDataUrl(attachment.file)),
+      format: inferAudioFormat(attachment.file ?? attachment)
     }
   };
 }
@@ -87,8 +110,9 @@ function classifyFile(file) {
 }
 
 function inferAudioFormat(file) {
-  const name = file.name.toLowerCase();
-  if (file.type === "audio/wav" || name.endsWith(".wav")) {
+  const mimeType = file?.type ?? file?.mimeType ?? "";
+  const name = (file?.name ?? "").toLowerCase();
+  if (mimeType === "audio/wav" || mimeType === "audio/x-wav" || name.endsWith(".wav")) {
     return "wav";
   }
 
@@ -106,6 +130,10 @@ function readFileAsDataUrl(file) {
 
 async function readFileAsBase64(file) {
   const dataUrl = await readFileAsDataUrl(file);
+  return extractBase64(dataUrl);
+}
+
+function extractBase64(dataUrl) {
   return dataUrl.split(",")[1] || "";
 }
 

public/chatclient/render.js

@@ -1,7 +1,6 @@
 import { escapeHtml, renderRichText } from "/chatclient/richText.js";
 
 export function renderAttachments(card, container, summary, attachments, onRemove, onPreview) {
-  card.hidden = attachments.length === 0;
   summary.textContent = buildAttachmentSummary(attachments);
   container.innerHTML = "";
 

public/chatclient/styles.css

@@ -75,6 +75,7 @@ button {
 .format-button,
 .tool-button,
 .send-button,
+.secondary-button,
 .attachment-remove,
 .attachment-preview-trigger,
 .attachment-preview__close {
@@ -178,7 +179,8 @@ h3 {
 
 .format-button,
 .tool-button,
-.send-button {
+.send-button,
+.secondary-button {
   min-height: 48px;
   border-radius: 18px;
   padding: 0 16px;
@@ -232,6 +234,10 @@ h3 {
   cursor: progress;
 }
 
+.secondary-button {
+  white-space: nowrap;
+}
+
 .tool-row .send-button {
   margin-left: auto;
 }

src/services/audioConversionService.js

@@ -5,15 +5,14 @@ import { spawn } from "node:child_process";
 import ffmpegPath from "ffmpeg-static";
 import { HttpError } from "../utils/httpError.js";
 
-function runFfmpeg(inputPath, outputPath) {
+function runFfmpeg(inputPath, outputPath, outputArgs) {
   return new Promise((resolve, reject) => {
     const child = spawn(ffmpegPath, [
       "-y",
       "-i",
       inputPath,
       "-vn",
-      "-acodec",
-      "libmp3lame",
+      ...outputArgs,
       outputPath
     ]);
 
@@ -55,22 +54,59 @@ export function createAudioConversionService({ fetchImpl = fetch, maxAudioDownlo
         throw new HttpError(413, `Audio URL exceeded ${maxAudioDownloadMb}MB download limit.`);
       }
 
-      const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "oapix-audio-"));
-      const inputPath = path.join(tempDir, "input-media");
-      const outputPath = path.join(tempDir, "output.mp3");
+      return transcodeAudioBuffer(audioBuffer, "mp3");
+    },
+
+    async normalizeBase64Audio({ data, format }) {
+      const audioBuffer = Buffer.from(data, "base64");
+      if (audioBuffer.length === 0) {
+        throw new HttpError(400, "Audio input must include base64 data.");
+      }
+
+      if (audioBuffer.length > maxBytes) {
+        throw new HttpError(413, `Audio input exceeded ${maxAudioDownloadMb}MB upload limit.`);
+      }
+
+      if (!["mp3", "wav"].includes(format)) {
+        throw new HttpError(400, "Audio input format must be mp3 or wav.");
+      }
 
       try {
-        await fs.writeFile(inputPath, audioBuffer);
-        await runFfmpeg(inputPath, outputPath);
-        const mp3Buffer = await fs.readFile(outputPath);
-
-        return {
-          data: mp3Buffer.toString("base64"),
-          format: "mp3"
-        };
-      } finally {
-        await fs.rm(tempDir, { force: true, recursive: true });
+        return await transcodeAudioBuffer(audioBuffer, format);
+      } catch (error) {
+        if (error instanceof HttpError) {
+          throw error;
+        }
+
+        throw new HttpError(400, `Failed to normalize audio input as ${format}.`, error.message);
       }
     }
   };
+
+  async function transcodeAudioBuffer(audioBuffer, outputFormat) {
+    const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "oapix-audio-"));
+    const inputPath = path.join(tempDir, "input-media");
+    const outputPath = path.join(tempDir, `output.${outputFormat}`);
+
+    try {
+      await fs.writeFile(inputPath, audioBuffer);
+      await runFfmpeg(inputPath, outputPath, ffmpegOutputArgs(outputFormat));
+      const convertedBuffer = await fs.readFile(outputPath);
+
+      return {
+        data: convertedBuffer.toString("base64"),
+        format: outputFormat
+      };
+    } finally {
+      await fs.rm(tempDir, { force: true, recursive: true });
+    }
+  }
+}
+
+function ffmpegOutputArgs(outputFormat) {
+  if (outputFormat === "wav") {
+    return ["-acodec", "pcm_s16le"];
+  }
+
+  return ["-acodec", "libmp3lame"];
 }

src/services/requestNormalizationService.js

@@ -88,7 +88,7 @@ export function createRequestNormalizationService({ audioConversionService }) {
 
             nextParts.push({
               type: "input_audio",
-              input_audio: normalizeAudioBase64(audio)
+              input_audio: await audioConversionService.normalizeBase64Audio(normalizeAudioBase64(audio))
             });
             continue;
           }

test/requestNormalization.test.js

@@ -11,6 +11,9 @@ test("normalizes audio URLs to mp3 base64 and raw image base64 to data URLs", as
           data: "ZmFrZS1tcDM=",
           format: "mp3"
         };
+      },
+      async normalizeBase64Audio(audio) {
+        return audio;
       }
     }
   });
@@ -51,3 +54,49 @@ test("normalizes audio URLs to mp3 base64 and raw image base64 to data URLs", as
   });
   assert.equal(responseContext.audioFormat, "wav");
 });
+
+test("normalizes uploaded wav audio before forwarding upstream", async () => {
+  const service = createRequestNormalizationService({
+    audioConversionService: {
+      async downloadAndConvertToMp3Base64() {
+        throw new Error("unexpected url conversion");
+      },
+      async normalizeBase64Audio(audio) {
+        assert.deepEqual(audio, {
+          data: "UklGRl8AAABXQVZFZm10",
+          format: "wav"
+        });
+
+        return {
+          data: "bm9ybWFsaXplZC13YXY=",
+          format: "wav"
+        };
+      }
+    }
+  });
+
+  const { normalizedBody } = await service.normalize({
+    messages: [
+      {
+        role: "user",
+        content: [
+          {
+            type: "input_audio",
+            input_audio: {
+              data: "UklGRl8AAABXQVZFZm10",
+              format: "wav"
+            }
+          }
+        ]
+      }
+    ]
+  });
+
+  assert.deepEqual(normalizedBody.messages[0].content[0], {
+    type: "input_audio",
+    input_audio: {
+      data: "bm9ybWFsaXplZC13YXY=",
+      format: "wav"
+    }
+  });
+});