@xinghunm/ai-chat 1.1.2 → 1.2.0

package/README.md

@@ -55,6 +55,28 @@ const transport = createDefaultChatTransport({
 })
 ```
 
+如果后端协议大体一致，只是模型列表或 `/chat/completions` 请求体需要调整，也可以继续复用默认 transport，只覆盖局部扩展点：
+
+```tsx
+const transport = createDefaultChatTransport({
+  apiBaseUrl: '/ai-api',
+  authToken: 'Bearer your-token-here',
+  resolveModels: async () => ({
+    data: [{ id: 'deepseek-chat', object: 'model' }],
+  }),
+  buildRequestBody: ({ model, mode, content }) => ({
+    model: 'deepseek-chat',
+    base_url: 'https://api.deepseek.com/v1',
+    api_key: 'sk-xxxxx',
+    mode,
+    stream: true,
+    messages: [{ role: 'user', content }],
+  }),
+})
+```
+
+默认 transport 在检测到图片附件时，会自动把用户输入组装成多模态 `messages[].content` 数组，并将图片文件序列化为 Data URL 后发送；如果你自定义 `buildRequestBody`，也会同时收到 `attachments` 参数，可按后端协议自行处理。
+
 ## 完整用法
 
 如需最大灵活性，可在 `AiChatProvider` 内手动组合子组件：
@@ -74,6 +96,7 @@ const transport: ChatTransport = {
     model,
     mode,
     content,
+    attachments,
     onSessionId,
     onUpdate,
     onDone,
@@ -85,7 +108,7 @@ const transport: ChatTransport = {
         method: 'POST',
         signal,
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ sessionId, model, mode, content }),
+        body: JSON.stringify({ sessionId, model, mode, content, attachments }),
       })
       const data = await response.json()
       onSessionId?.(data.sessionId)
@@ -193,6 +216,13 @@ export const CustomChat = () => (
 | `completions` | `"/chat/completions"` | 流式聊天接口路径。     |
 | `terminate`   | `"/chat/terminate"`   | 停止流式响应接口路径。 |
 
+此外还支持两个轻量扩展点：
+
+| 键                 | 类型                                | 说明                                                                           |
+| ------------------ | ----------------------------------- | ------------------------------------------------------------------------------ |
+| `resolveModels`    | `() => Promise<ChatModelsResponse>` | 覆盖默认的 `/models` 请求，直接返回模型列表。                                  |
+| `buildRequestBody` | `(args) => unknown`                 | 覆盖默认的 `/chat/completions` 请求体构造逻辑；`args` 同时包含 `attachments`。 |
+
 ### `AiChatLabels`
 
 所有字段均为可选，未指定的字段回退到 `DEFAULT_AI_CHAT_LABELS` 中的英文默认值。

package/dist/index.d.mts

@@ -42,6 +42,12 @@ interface ChatImageAttachment {
     mimeType: string;
     size: number;
     previewUrl: string;
+    /**
+     * Original file kept for transports that need to upload or serialize the image.
+     *
+     * This is only available for client-originated attachments selected in the composer.
+     */
+    file?: File;
 }
 /**
  * Select option metadata used by plan questionnaires.
@@ -291,6 +297,10 @@ interface ChatTransportStartStreamArgs {
     mode: ChatAgentMode;
     /** User message content that should be sent to the backend. */
     content: string;
+    /**
+     * Optional image attachments selected in the composer and sent alongside the text.
+     */
+    attachments?: ChatImageAttachment[];
     /** Abort signal controlled by the chat composer stop action. */
     signal?: AbortSignal;
     /** Emits normalized streaming patches that should update the assistant message. */
@@ -511,6 +521,25 @@ interface ChatToolExecutionPolicy {
     /** Approval timeout in seconds, forwarded when approval is enabled. */
     approvalTimeoutSec?: number;
 }
+/**
+ * Arguments passed to a custom request body builder for the default transport.
+ */
+interface DefaultChatTransportRequestBodyBuilderArgs {
+    sessionId?: string;
+    model: string;
+    mode: ChatAgentMode;
+    content: string;
+    attachments?: ChatImageAttachment[];
+}
+/**
+ * Optional builder used to customize the `/chat/completions` request body while
+ * reusing the default streaming transport behavior.
+ */
+type DefaultChatTransportRequestBodyBuilder = (args: DefaultChatTransportRequestBodyBuilderArgs) => unknown;
+/**
+ * Optional model resolver used to override the default `/models` request.
+ */
+type DefaultChatTransportModelsResolver = () => Promise<ChatModelsResponse>;
 /**
  * Options for the built-in HTTP transport adapter.
  */
@@ -523,6 +552,10 @@ interface CreateDefaultChatTransportOptions {
     toolExecutionPolicy?: ChatToolExecutionPolicy;
     /** Optional extra headers appended to each streaming chat completion request. */
     streamHeaders?: Record<string, string>;
+    /** Optional resolver used to override the built-in model catalog request. */
+    resolveModels?: DefaultChatTransportModelsResolver;
+    /** Optional builder used to override the built-in chat completion request body. */
+    buildRequestBody?: DefaultChatTransportRequestBodyBuilder;
     /** Optional transformer used to normalize custom stream packets. */
     transformStreamPacket?: TransformChatStreamPacket;
     /** Optional endpoint overrides for backends that use different paths. */
@@ -533,7 +566,7 @@ interface CreateDefaultChatTransportOptions {
 /**
  * Creates the built-in transport backed by the current HTTP chat API.
  */
-declare const createDefaultChatTransport: ({ apiBaseUrl, authToken, toolExecutionPolicy, streamHeaders, transformStreamPacket, endpoints, axiosInstance, }: CreateDefaultChatTransportOptions) => ChatTransport;
+declare const createDefaultChatTransport: ({ apiBaseUrl, authToken, toolExecutionPolicy, streamHeaders, resolveModels, buildRequestBody, transformStreamPacket, endpoints, axiosInstance, }: CreateDefaultChatTransportOptions) => ChatTransport;
 
 declare const ChatThread: () => _emotion_react_jsx_runtime.JSX.Element;
 
@@ -654,4 +687,4 @@ declare const useChatContext: () => ChatContextValue;
  */
 declare const useChatStore: <T>(selector: (state: ChatStore) => T) => T;
 
-export { AiChat, type AiChatLabels, type AiChatProps, AiChatProvider, type AiChatProviderProps, CHAT_AGENT_MODES, CHAT_MESSAGE_RENDER_ORDERS, type ChatAgentMode, ChatComposer, type ChatComposerViewProps, type ChatConfirmationSubmitHandler, ChatConversationList, type ChatImageAttachment, type ChatMessage, type ChatMessageBlock, type ChatMessageBlockRenderer, type ChatMessageBlockRendererProps, type ChatMessageRenderOrder, type ChatMessageStatus, type ChatModel, type ChatParameterSummaryItem, type ChatQuestionnaireSubmitHandler, type ChatRole, type ChatSession, type ChatStreamMessagePatch, type ChatStreamPacketTransformArgs, type ChatStreamPacketUpdate, type ChatSubmissionContext, ChatThread, type ChatToolExecutionPolicy, type ChatTransport, type ChatTransportStartStreamArgs, type CreateDefaultChatTransportOptions, DEFAULT_AI_CHAT_LABELS, DEFAULT_CHAT_AGENT_MODE, type DefaultChatTransportEndpoints, type ExecutionConfirmationSubmission, type ExecutionProposal, type PlanQuestionOption, type PlanQuestionSubmissionDetail, type PlanQuestionnaire, type PlanQuestionnaireSubmission, type ResultSummary, type TransformChatStreamPacket, createDefaultChatTransport, useChatContext, useChatStore };
+export { AiChat, type AiChatLabels, type AiChatProps, AiChatProvider, type AiChatProviderProps, CHAT_AGENT_MODES, CHAT_MESSAGE_RENDER_ORDERS, type ChatAgentMode, ChatComposer, type ChatComposerViewProps, type ChatConfirmationSubmitHandler, ChatConversationList, type ChatImageAttachment, type ChatMessage, type ChatMessageBlock, type ChatMessageBlockRenderer, type ChatMessageBlockRendererProps, type ChatMessageRenderOrder, type ChatMessageStatus, type ChatModel, type ChatParameterSummaryItem, type ChatQuestionnaireSubmitHandler, type ChatRole, type ChatSession, type ChatStreamMessagePatch, type ChatStreamPacketTransformArgs, type ChatStreamPacketUpdate, type ChatSubmissionContext, ChatThread, type ChatToolExecutionPolicy, type ChatTransport, type ChatTransportStartStreamArgs, type CreateDefaultChatTransportOptions, DEFAULT_AI_CHAT_LABELS, DEFAULT_CHAT_AGENT_MODE, type DefaultChatTransportEndpoints, type DefaultChatTransportModelsResolver, type DefaultChatTransportRequestBodyBuilder, type DefaultChatTransportRequestBodyBuilderArgs, type ExecutionConfirmationSubmission, type ExecutionProposal, type PlanQuestionOption, type PlanQuestionSubmissionDetail, type PlanQuestionnaire, type PlanQuestionnaireSubmission, type ResultSummary, type TransformChatStreamPacket, createDefaultChatTransport, useChatContext, useChatStore };

package/dist/index.d.ts

@@ -42,6 +42,12 @@ interface ChatImageAttachment {
     mimeType: string;
     size: number;
     previewUrl: string;
+    /**
+     * Original file kept for transports that need to upload or serialize the image.
+     *
+     * This is only available for client-originated attachments selected in the composer.
+     */
+    file?: File;
 }
 /**
  * Select option metadata used by plan questionnaires.
@@ -291,6 +297,10 @@ interface ChatTransportStartStreamArgs {
     mode: ChatAgentMode;
     /** User message content that should be sent to the backend. */
     content: string;
+    /**
+     * Optional image attachments selected in the composer and sent alongside the text.
+     */
+    attachments?: ChatImageAttachment[];
     /** Abort signal controlled by the chat composer stop action. */
     signal?: AbortSignal;
     /** Emits normalized streaming patches that should update the assistant message. */
@@ -511,6 +521,25 @@ interface ChatToolExecutionPolicy {
     /** Approval timeout in seconds, forwarded when approval is enabled. */
     approvalTimeoutSec?: number;
 }
+/**
+ * Arguments passed to a custom request body builder for the default transport.
+ */
+interface DefaultChatTransportRequestBodyBuilderArgs {
+    sessionId?: string;
+    model: string;
+    mode: ChatAgentMode;
+    content: string;
+    attachments?: ChatImageAttachment[];
+}
+/**
+ * Optional builder used to customize the `/chat/completions` request body while
+ * reusing the default streaming transport behavior.
+ */
+type DefaultChatTransportRequestBodyBuilder = (args: DefaultChatTransportRequestBodyBuilderArgs) => unknown;
+/**
+ * Optional model resolver used to override the default `/models` request.
+ */
+type DefaultChatTransportModelsResolver = () => Promise<ChatModelsResponse>;
 /**
  * Options for the built-in HTTP transport adapter.
  */
@@ -523,6 +552,10 @@ interface CreateDefaultChatTransportOptions {
     toolExecutionPolicy?: ChatToolExecutionPolicy;
     /** Optional extra headers appended to each streaming chat completion request. */
     streamHeaders?: Record<string, string>;
+    /** Optional resolver used to override the built-in model catalog request. */
+    resolveModels?: DefaultChatTransportModelsResolver;
+    /** Optional builder used to override the built-in chat completion request body. */
+    buildRequestBody?: DefaultChatTransportRequestBodyBuilder;
     /** Optional transformer used to normalize custom stream packets. */
     transformStreamPacket?: TransformChatStreamPacket;
     /** Optional endpoint overrides for backends that use different paths. */
@@ -533,7 +566,7 @@ interface CreateDefaultChatTransportOptions {
 /**
  * Creates the built-in transport backed by the current HTTP chat API.
  */
-declare const createDefaultChatTransport: ({ apiBaseUrl, authToken, toolExecutionPolicy, streamHeaders, transformStreamPacket, endpoints, axiosInstance, }: CreateDefaultChatTransportOptions) => ChatTransport;
+declare const createDefaultChatTransport: ({ apiBaseUrl, authToken, toolExecutionPolicy, streamHeaders, resolveModels, buildRequestBody, transformStreamPacket, endpoints, axiosInstance, }: CreateDefaultChatTransportOptions) => ChatTransport;
 
 declare const ChatThread: () => _emotion_react_jsx_runtime.JSX.Element;
 
@@ -654,4 +687,4 @@ declare const useChatContext: () => ChatContextValue;
  */
 declare const useChatStore: <T>(selector: (state: ChatStore) => T) => T;
 
-export { AiChat, type AiChatLabels, type AiChatProps, AiChatProvider, type AiChatProviderProps, CHAT_AGENT_MODES, CHAT_MESSAGE_RENDER_ORDERS, type ChatAgentMode, ChatComposer, type ChatComposerViewProps, type ChatConfirmationSubmitHandler, ChatConversationList, type ChatImageAttachment, type ChatMessage, type ChatMessageBlock, type ChatMessageBlockRenderer, type ChatMessageBlockRendererProps, type ChatMessageRenderOrder, type ChatMessageStatus, type ChatModel, type ChatParameterSummaryItem, type ChatQuestionnaireSubmitHandler, type ChatRole, type ChatSession, type ChatStreamMessagePatch, type ChatStreamPacketTransformArgs, type ChatStreamPacketUpdate, type ChatSubmissionContext, ChatThread, type ChatToolExecutionPolicy, type ChatTransport, type ChatTransportStartStreamArgs, type CreateDefaultChatTransportOptions, DEFAULT_AI_CHAT_LABELS, DEFAULT_CHAT_AGENT_MODE, type DefaultChatTransportEndpoints, type ExecutionConfirmationSubmission, type ExecutionProposal, type PlanQuestionOption, type PlanQuestionSubmissionDetail, type PlanQuestionnaire, type PlanQuestionnaireSubmission, type ResultSummary, type TransformChatStreamPacket, createDefaultChatTransport, useChatContext, useChatStore };
+export { AiChat, type AiChatLabels, type AiChatProps, AiChatProvider, type AiChatProviderProps, CHAT_AGENT_MODES, CHAT_MESSAGE_RENDER_ORDERS, type ChatAgentMode, ChatComposer, type ChatComposerViewProps, type ChatConfirmationSubmitHandler, ChatConversationList, type ChatImageAttachment, type ChatMessage, type ChatMessageBlock, type ChatMessageBlockRenderer, type ChatMessageBlockRendererProps, type ChatMessageRenderOrder, type ChatMessageStatus, type ChatModel, type ChatParameterSummaryItem, type ChatQuestionnaireSubmitHandler, type ChatRole, type ChatSession, type ChatStreamMessagePatch, type ChatStreamPacketTransformArgs, type ChatStreamPacketUpdate, type ChatSubmissionContext, ChatThread, type ChatToolExecutionPolicy, type ChatTransport, type ChatTransportStartStreamArgs, type CreateDefaultChatTransportOptions, DEFAULT_AI_CHAT_LABELS, DEFAULT_CHAT_AGENT_MODE, type DefaultChatTransportEndpoints, type DefaultChatTransportModelsResolver, type DefaultChatTransportRequestBodyBuilder, type DefaultChatTransportRequestBodyBuilderArgs, type ExecutionConfirmationSubmission, type ExecutionProposal, type PlanQuestionOption, type PlanQuestionSubmissionDetail, type PlanQuestionnaire, type PlanQuestionnaireSubmission, type ResultSummary, type TransformChatStreamPacket, createDefaultChatTransport, useChatContext, useChatStore };

package/dist/index.js

@@ -491,6 +491,7 @@ var startChatStream = async ({
   sessionId,
   authToken,
   requestHeaders,
+  requestBody,
   model,
   mode,
   content,
@@ -512,12 +513,14 @@ var startChatStream = async ({
     const response = await fetch(`${apiBaseUrl}${endpointPath}`, {
       method: "POST",
       headers,
-      body: JSON.stringify({
-        model,
-        mode,
-        stream: true,
-        messages: [{ role: "user", content }]
-      }),
+      body: JSON.stringify(
+        requestBody ?? {
+          model,
+          mode,
+          stream: true,
+          messages: [{ role: "user", content }]
+        }
+      ),
       signal
     });
     const contentType = response.headers.get("content-type") ?? "";
@@ -593,11 +596,70 @@ var createModeDefaultHeaders = (mode) => {
   }
   return {};
 };
+var readFileAsDataUrl = (file) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => {
+    if (typeof reader.result === "string") {
+      resolve(reader.result);
+      return;
+    }
+    reject(new Error(`Failed to read image attachment: ${file.name}`));
+  };
+  reader.onerror = () => {
+    reject(new Error(`Failed to read image attachment: ${file.name}`));
+  };
+  reader.readAsDataURL(file);
+});
+var resolveAttachmentDataUrl = async (attachment) => {
+  if (attachment.file) {
+    return readFileAsDataUrl(attachment.file);
+  }
+  if (attachment.previewUrl.startsWith("data:image/")) {
+    return attachment.previewUrl;
+  }
+  throw new Error(`Attachment is missing file data: ${attachment.name}`);
+};
+var createDefaultRequestBody = async ({
+  model,
+  mode,
+  content,
+  attachments
+}) => {
+  const hasAttachments = Boolean(attachments?.length);
+  if (!hasAttachments) {
+    return {
+      model,
+      mode,
+      stream: true,
+      messages: [{ role: "user", content }]
+    };
+  }
+  const imageParts = await Promise.all(
+    (attachments ?? []).map(async (attachment) => ({
+      type: "image_url",
+      image_url: {
+        url: await resolveAttachmentDataUrl(attachment)
+      }
+    }))
+  );
+  const messageContent = [
+    ...content ? [{ type: "text", text: content }] : [],
+    ...imageParts
+  ];
+  return {
+    model,
+    mode,
+    stream: true,
+    messages: [{ role: "user", content: messageContent }]
+  };
+};
 var createDefaultChatTransport = ({
   apiBaseUrl,
   authToken,
   toolExecutionPolicy,
   streamHeaders,
+  resolveModels,
+  buildRequestBody,
   transformStreamPacket,
   endpoints,
   axiosInstance
@@ -612,12 +674,13 @@ var createDefaultChatTransport = ({
     ...streamHeaders
   };
   return {
-    getModels: () => getChatModels(client, resolvedEndpoints.models),
+    getModels: () => resolveModels?.() ?? getChatModels(client, resolvedEndpoints.models),
     startStream: async ({
       sessionId,
       model,
       mode,
       content,
+      attachments,
       signal,
       onUpdate,
       onSessionId,
@@ -628,12 +691,20 @@ var createDefaultChatTransport = ({
         ...createModeDefaultHeaders(mode),
         ...resolvedStreamHeaders
       };
+      const requestBody = buildRequestBody ? buildRequestBody({
+        sessionId,
+        model,
+        mode,
+        content,
+        attachments
+      }) : await createDefaultRequestBody({ model, mode, content, attachments });
       await startChatStream({
         apiBaseUrl,
         endpointPath: resolvedEndpoints.completions,
         sessionId,
         authToken,
         requestHeaders,
+        requestBody,
         model,
         mode,
         content,
@@ -2339,7 +2410,7 @@ var TextInput = import_styled4.default.input`
     color: rgba(255, 255, 255, 0.34);
   }
 `;
-var InlineOtherInput = (0, import_styled4.default)(import_compass_ui.Input)`
+var InlineOtherInput = (0, import_styled4.default)(import_compass_ui.InputField)`
   width: 100%;
   margin-top: 0;
 
@@ -4087,7 +4158,8 @@ var useComposerAttachments = () => {
       return [];
     }
     const nextMessageAttachments = currentAttachments.map(({ file: _file, ...attachment }) => ({
-      ...attachment
+      ...attachment,
+      file: _file
     }));
     attachmentsRef.current = [];
     setAttachments([]);
@@ -4237,6 +4309,7 @@ var useChatComposer = () => {
       localSessionId,
       sessionId,
       content,
+      attachments: attachments2,
       model,
       mode
     }) => {
@@ -4251,7 +4324,7 @@ var useChatComposer = () => {
       startStreamingMessage(currentSessionId, assistantMessage);
       abortControllerRef.current?.abort();
       abortControllerRef.current = new AbortController();
-      lastRequestRef.current = { localSessionId, sessionId, content, model, mode };
+      lastRequestRef.current = { localSessionId, sessionId, content, attachments: attachments2, model, mode };
       let accumulated = "";
       try {
         await transport.startStream({
@@ -4259,6 +4332,7 @@ var useChatComposer = () => {
           model,
           mode,
           content,
+          attachments: attachments2,
           signal: abortControllerRef.current.signal,
           onSessionId: (nextSessionId) => {
             if (!nextSessionId || nextSessionId === currentSessionId)
@@ -4269,6 +4343,7 @@ var useChatComposer = () => {
               localSessionId: nextSessionId,
               sessionId: nextSessionId,
               content,
+              attachments: attachments2,
               model,
               mode
             };
@@ -4324,8 +4399,6 @@ var useChatComposer = () => {
   const send = (0, import_react13.useCallback)(
     async (contentOverride) => {
       const content = (contentOverride ?? value).trim();
-      const hasText = Boolean(content);
-      const hasAttachments = attachments.length > 0;
       if (!canSendChatMessage({
         value: content,
         attachmentCount: attachments.length,
@@ -4335,7 +4408,7 @@ var useChatComposer = () => {
       })) {
         return;
       }
-      if (hasText && !(selectedModel || activeSession?.model || availableModels[0]?.id)) {
+      if (!(selectedModel || activeSession?.model || availableModels[0]?.id)) {
         return;
       }
       const resolvedModel = selectedModel || activeSession?.model || availableModels[0]?.id || "local-image";
@@ -4353,19 +4426,18 @@ var useChatComposer = () => {
         sessionId: localSessionId,
         content,
         attachments: messageAttachments,
-        localOnly: hasAttachments,
+        localOnly: false,
         createdAt: nowIso(),
         createMessageId: () => `user-${Date.now()}`
       });
       appendMessage(localSessionId, userMessage);
       setAttachmentNotice(null);
       setValue("");
-      if (!hasText)
-        return;
       await runStream({
         localSessionId,
         sessionId,
         content,
+        attachments: messageAttachments,
         model: resolvedModel,
         mode: selectedMode
       });
@@ -5324,9 +5396,9 @@ var ComposerExpandButton = import_styled14.default.button`
 var Footer = import_styled14.default.div`
   grid-area: footer;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: auto minmax(0, 1fr);
   align-items: flex-end;
-  gap: 16px;
+  gap: 8px;
   padding: 0 14px 14px;
 `;
 var LeadingActions = import_styled14.default.div`
@@ -5341,6 +5413,9 @@ var TrailingActions = import_styled14.default.div`
   align-items: center;
   flex-wrap: wrap;
   min-width: 0;
+  width: fit-content;
+  max-width: 100%;
+  justify-self: end;
   justify-content: flex-end;
   gap: 8px;
 `;
@@ -5555,6 +5630,7 @@ var Workspace = import_styled17.default.section`
   flex: 1;
   display: flex;
   flex-direction: column;
+  gap: 12px;
   min-height: 0;
   overflow: hidden;
 `;

package/dist/index.mjs

@@ -444,6 +444,7 @@ var startChatStream = async ({
   sessionId,
   authToken,
   requestHeaders,
+  requestBody,
   model,
   mode,
   content,
@@ -465,12 +466,14 @@ var startChatStream = async ({
     const response = await fetch(`${apiBaseUrl}${endpointPath}`, {
       method: "POST",
       headers,
-      body: JSON.stringify({
-        model,
-        mode,
-        stream: true,
-        messages: [{ role: "user", content }]
-      }),
+      body: JSON.stringify(
+        requestBody ?? {
+          model,
+          mode,
+          stream: true,
+          messages: [{ role: "user", content }]
+        }
+      ),
       signal
     });
     const contentType = response.headers.get("content-type") ?? "";
@@ -546,11 +549,70 @@ var createModeDefaultHeaders = (mode) => {
   }
   return {};
 };
+var readFileAsDataUrl = (file) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => {
+    if (typeof reader.result === "string") {
+      resolve(reader.result);
+      return;
+    }
+    reject(new Error(`Failed to read image attachment: ${file.name}`));
+  };
+  reader.onerror = () => {
+    reject(new Error(`Failed to read image attachment: ${file.name}`));
+  };
+  reader.readAsDataURL(file);
+});
+var resolveAttachmentDataUrl = async (attachment) => {
+  if (attachment.file) {
+    return readFileAsDataUrl(attachment.file);
+  }
+  if (attachment.previewUrl.startsWith("data:image/")) {
+    return attachment.previewUrl;
+  }
+  throw new Error(`Attachment is missing file data: ${attachment.name}`);
+};
+var createDefaultRequestBody = async ({
+  model,
+  mode,
+  content,
+  attachments
+}) => {
+  const hasAttachments = Boolean(attachments?.length);
+  if (!hasAttachments) {
+    return {
+      model,
+      mode,
+      stream: true,
+      messages: [{ role: "user", content }]
+    };
+  }
+  const imageParts = await Promise.all(
+    (attachments ?? []).map(async (attachment) => ({
+      type: "image_url",
+      image_url: {
+        url: await resolveAttachmentDataUrl(attachment)
+      }
+    }))
+  );
+  const messageContent = [
+    ...content ? [{ type: "text", text: content }] : [],
+    ...imageParts
+  ];
+  return {
+    model,
+    mode,
+    stream: true,
+    messages: [{ role: "user", content: messageContent }]
+  };
+};
 var createDefaultChatTransport = ({
   apiBaseUrl,
   authToken,
   toolExecutionPolicy,
   streamHeaders,
+  resolveModels,
+  buildRequestBody,
   transformStreamPacket,
   endpoints,
   axiosInstance
@@ -565,12 +627,13 @@ var createDefaultChatTransport = ({
     ...streamHeaders
   };
   return {
-    getModels: () => getChatModels(client, resolvedEndpoints.models),
+    getModels: () => resolveModels?.() ?? getChatModels(client, resolvedEndpoints.models),
     startStream: async ({
       sessionId,
       model,
       mode,
       content,
+      attachments,
       signal,
       onUpdate,
       onSessionId,
@@ -581,12 +644,20 @@ var createDefaultChatTransport = ({
         ...createModeDefaultHeaders(mode),
         ...resolvedStreamHeaders
       };
+      const requestBody = buildRequestBody ? buildRequestBody({
+        sessionId,
+        model,
+        mode,
+        content,
+        attachments
+      }) : await createDefaultRequestBody({ model, mode, content, attachments });
       await startChatStream({
         apiBaseUrl,
         endpointPath: resolvedEndpoints.completions,
         sessionId,
         authToken,
         requestHeaders,
+        requestBody,
         model,
         mode,
         content,
@@ -1495,7 +1566,7 @@ import {
   useState as useState2
 } from "react";
 import styled4 from "@emotion/styled";
-import { Input } from "@xinghunm/compass-ui";
+import { InputField as Input } from "@xinghunm/compass-ui";
 
 // src/components/chat-thread/components/questionnaire-card-helpers.ts
 var OTHER_OPTION_VALUE = "__other__";
@@ -4044,7 +4115,8 @@ var useComposerAttachments = () => {
       return [];
     }
     const nextMessageAttachments = currentAttachments.map(({ file: _file, ...attachment }) => ({
-      ...attachment
+      ...attachment,
+      file: _file
     }));
     attachmentsRef.current = [];
     setAttachments([]);
@@ -4194,6 +4266,7 @@ var useChatComposer = () => {
       localSessionId,
       sessionId,
       content,
+      attachments: attachments2,
       model,
       mode
     }) => {
@@ -4208,7 +4281,7 @@ var useChatComposer = () => {
       startStreamingMessage(currentSessionId, assistantMessage);
       abortControllerRef.current?.abort();
       abortControllerRef.current = new AbortController();
-      lastRequestRef.current = { localSessionId, sessionId, content, model, mode };
+      lastRequestRef.current = { localSessionId, sessionId, content, attachments: attachments2, model, mode };
       let accumulated = "";
       try {
         await transport.startStream({
@@ -4216,6 +4289,7 @@ var useChatComposer = () => {
           model,
           mode,
           content,
+          attachments: attachments2,
           signal: abortControllerRef.current.signal,
           onSessionId: (nextSessionId) => {
             if (!nextSessionId || nextSessionId === currentSessionId)
@@ -4226,6 +4300,7 @@ var useChatComposer = () => {
               localSessionId: nextSessionId,
               sessionId: nextSessionId,
               content,
+              attachments: attachments2,
               model,
               mode
             };
@@ -4281,8 +4356,6 @@ var useChatComposer = () => {
   const send = useCallback4(
     async (contentOverride) => {
       const content = (contentOverride ?? value).trim();
-      const hasText = Boolean(content);
-      const hasAttachments = attachments.length > 0;
       if (!canSendChatMessage({
         value: content,
         attachmentCount: attachments.length,
@@ -4292,7 +4365,7 @@ var useChatComposer = () => {
       })) {
         return;
       }
-      if (hasText && !(selectedModel || activeSession?.model || availableModels[0]?.id)) {
+      if (!(selectedModel || activeSession?.model || availableModels[0]?.id)) {
         return;
       }
       const resolvedModel = selectedModel || activeSession?.model || availableModels[0]?.id || "local-image";
@@ -4310,19 +4383,18 @@ var useChatComposer = () => {
         sessionId: localSessionId,
         content,
         attachments: messageAttachments,
-        localOnly: hasAttachments,
+        localOnly: false,
         createdAt: nowIso(),
         createMessageId: () => `user-${Date.now()}`
       });
       appendMessage(localSessionId, userMessage);
       setAttachmentNotice(null);
       setValue("");
-      if (!hasText)
-        return;
       await runStream({
         localSessionId,
         sessionId,
         content,
+        attachments: messageAttachments,
         model: resolvedModel,
         mode: selectedMode
       });
@@ -5281,9 +5353,9 @@ var ComposerExpandButton = styled14.button`
 var Footer = styled14.div`
   grid-area: footer;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: auto minmax(0, 1fr);
   align-items: flex-end;
-  gap: 16px;
+  gap: 8px;
   padding: 0 14px 14px;
 `;
 var LeadingActions = styled14.div`
@@ -5298,6 +5370,9 @@ var TrailingActions = styled14.div`
   align-items: center;
   flex-wrap: wrap;
   min-width: 0;
+  width: fit-content;
+  max-width: 100%;
+  justify-self: end;
   justify-content: flex-end;
   gap: 8px;
 `;
@@ -5512,6 +5587,7 @@ var Workspace = styled17.section`
   flex: 1;
   display: flex;
   flex-direction: column;
+  gap: 12px;
   min-height: 0;
   overflow: hidden;
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xinghunm/ai-chat",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "AI chat React component library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -19,7 +19,7 @@
   "peerDependencies": {
     "@emotion/react": ">=11",
     "@emotion/styled": ">=11",
-    "@xinghunm/compass-ui": ">=0.9.0",
+    "@xinghunm/compass-ui": "0.8.3",
     "axios": ">=1.0",
     "react": ">=18",
     "react-dom": ">=18",