@lvce-editor/chat-view 1.15.0 → 1.16.0

package/dist/chatViewWorkerMain.js

@@ -1179,9 +1179,45 @@ const terminate = () => {
   globalThis.close();
 };
 
+const measureTextBlockHeight = async (text, fontFamily, fontSize, lineHeight, width) => {
+  return invoke('MeasureTextBlockHeight.measureTextBlockHeight', text, fontSize, fontFamily, lineHeight, width);
+};
+
+const getComposerWidth = width => {
+  return Math.max(1, width - 32);
+};
+const getMinComposerHeight = lineHeight => {
+  return lineHeight + 8;
+};
+const estimateComposerHeight = (value, lineHeight) => {
+  const lineCount = value.split('\n').length;
+  return lineCount * lineHeight + 8;
+};
+const getComposerHeight = async (state, value, width = state.width) => {
+  const {
+    composerFontFamily,
+    composerFontSize,
+    composerLineHeight
+  } = state;
+  const minimumHeight = getMinComposerHeight(composerLineHeight);
+  const content = value || ' ';
+  const composerWidth = getComposerWidth(width);
+  try {
+    const measuredHeight = await measureTextBlockHeight(content, composerFontFamily, composerFontSize, composerLineHeight, composerWidth);
+    const height = Math.ceil(measuredHeight) + 8;
+    return Math.max(minimumHeight, height);
+  } catch {
+    return Math.max(minimumHeight, estimateComposerHeight(value, composerLineHeight));
+  }
+};
+const getMinComposerHeightForState = state => {
+  return getMinComposerHeight(state.composerLineHeight);
+};
+
 const clearInput = async state => {
   return {
     ...state,
+    composerHeight: getMinComposerHeightForState(state),
     composerValue: ''
   };
 };
@@ -1237,6 +1273,9 @@ const sendMessage = () => {
 const save = () => {
   return i18nString('Save');
 };
+const saving = () => {
+  return i18nString('Saving...');
+};
 const getOpenRouterApiKey = () => {
   return i18nString('Get API Key');
 };
@@ -1270,6 +1309,18 @@ const getDefaultModels = () => {
     id: defaultModelId,
     name: 'test',
     provider: 'test'
+  }, {
+    id: 'openapi/gpt-4o-mini',
+    name: 'GPT-4o Mini',
+    provider: 'openApi'
+  }, {
+    id: 'openapi/gpt-4o',
+    name: 'GPT-4o',
+    provider: 'openApi'
+  }, {
+    id: 'openapi/gpt-4.1-mini',
+    name: 'GPT-4.1 Mini',
+    provider: 'openApi'
   }, {
     id: 'codex-5.3',
     name: 'Codex 5.3',
@@ -1323,8 +1374,14 @@ const getDefaultModels = () => {
 const createDefaultState = () => {
   const defaultSessionId = 'session-1';
   const defaultModelId = 'test';
+  const composerFontSize = 13;
+  const composerLineHeight = 20;
   return {
     assetDir: '',
+    composerFontFamily: 'system-ui',
+    composerFontSize,
+    composerHeight: composerLineHeight + 8,
+    composerLineHeight,
     composerValue: '',
     errorCount: 0,
     focus: 'composer',
@@ -1346,6 +1403,7 @@ const createDefaultState = () => {
     openRouterApiKey: '',
     openRouterApiKeyInput: '',
     openRouterApiKeysSettingsUrl: 'https://openrouter.ai/settings/keys',
+    openRouterApiKeyState: 'idle',
     platform: 0,
     renamingSessionId: '',
     selectedModelId: defaultModelId,
@@ -2118,6 +2176,15 @@ const openRouterTooManyRequestsMessage = 'OpenRouter rate limit reached (429). P
 const openRouterRequestFailureReasons = ['ContentSecurityPolicyViolation: Check DevTools for details.', 'OpenRouter server offline: Check DevTools for details.', 'Check your internet connection.'];
 const openRouterTooManyRequestsReasons = ['Wait a short time and retry your request.', 'Reduce request frequency to avoid rate limits.', 'Use a different model if this one is saturated.'];
 
+const delay = async ms => {
+  await new Promise(resolve => setTimeout(resolve, ms));
+};
+
+const getMockAiResponse = async userMessage => {
+  await delay(800);
+  return `Mock AI response: I received "${userMessage}".`;
+};
+
 const activateByEvent = (event, assetDir, platform) => {
   // @ts-ignore
   return activateByEvent$1(event, assetDir, platform);
@@ -2139,13 +2206,108 @@ const executeProvider = async ({
 
 const CommandExecute = 'ExtensionHostCommand.executeCommand';
 
-const delay = async ms => {
-  await new Promise(resolve => setTimeout(resolve, ms));
+const normalizeLimitInfo = value => {
+  if (!value || typeof value !== 'object') {
+    return undefined;
+  }
+  const limitRemaining = Reflect.get(value, 'limitRemaining');
+  const limitReset = Reflect.get(value, 'limitReset');
+  const retryAfter = Reflect.get(value, 'retryAfter');
+  const usage = Reflect.get(value, 'usage');
+  const usageDaily = Reflect.get(value, 'usageDaily');
+  const normalized = {
+    limitRemaining: typeof limitRemaining === 'number' || limitRemaining === null ? limitRemaining : undefined,
+    limitReset: typeof limitReset === 'string' || limitReset === null ? limitReset : undefined,
+    retryAfter: typeof retryAfter === 'string' || retryAfter === null ? retryAfter : undefined,
+    usage: typeof usage === 'number' ? usage : undefined,
+    usageDaily: typeof usageDaily === 'number' ? usageDaily : undefined
+  };
+  const hasDetails = normalized.limitRemaining !== undefined || normalized.limitReset !== undefined || normalized.retryAfter !== undefined || normalized.usage !== undefined || normalized.usageDaily !== undefined;
+  return hasDetails ? normalized : undefined;
 };
 
-const getMockAiResponse = async userMessage => {
-  await delay(800);
-  return `Mock AI response: I received "${userMessage}".`;
+const normalizeMockResult = value => {
+  if (typeof value === 'string') {
+    return {
+      text: value,
+      type: 'success'
+    };
+  }
+  if (!value || typeof value !== 'object') {
+    return {
+      details: 'request-failed',
+      type: 'error'
+    };
+  }
+  const type = Reflect.get(value, 'type');
+  if (type === 'success') {
+    const text = Reflect.get(value, 'text');
+    if (typeof text === 'string') {
+      return {
+        text,
+        type: 'success'
+      };
+    }
+    return {
+      details: 'request-failed',
+      type: 'error'
+    };
+  }
+  if (type === 'error') {
+    const details = Reflect.get(value, 'details');
+    if (details === 'request-failed' || details === 'too-many-requests' || details === 'http-error') {
+      const rawMessage = Reflect.get(value, 'rawMessage');
+      const statusCode = Reflect.get(value, 'statusCode');
+      return {
+        details,
+        limitInfo: normalizeLimitInfo(Reflect.get(value, 'limitInfo')),
+        rawMessage: typeof rawMessage === 'string' ? rawMessage : undefined,
+        statusCode: typeof statusCode === 'number' ? statusCode : undefined,
+        type: 'error'
+      };
+    }
+  }
+  const text = Reflect.get(value, 'text');
+  if (typeof text === 'string') {
+    return {
+      text,
+      type: 'success'
+    };
+  }
+  return {
+    details: 'request-failed',
+    type: 'error'
+  };
+};
+
+const getMockOpenRouterAssistantText = async (messages, modelId, openRouterApiBaseUrl, openRouterApiKey, mockApiCommandId, assetDir, platform) => {
+  if (!mockApiCommandId) {
+    return {
+      details: 'request-failed',
+      type: 'error'
+    };
+  }
+  try {
+    const result = await executeProvider({
+      assetDir,
+      event: `onCommand:${mockApiCommandId}`,
+      method: CommandExecute,
+      noProviderFoundMessage: 'No mock api command found',
+      params: [mockApiCommandId, {
+        messages,
+        modelId,
+        openRouterApiBaseUrl,
+        openRouterApiKey
+      }],
+      platform
+    });
+    return normalizeMockResult(result);
+  } catch {
+    return {
+      details: 'request-failed',
+      type: 'error'
+    };
+  }
 };
 
 const getOpenApiApiEndpoint = openApiApiBaseUrl => {
@@ -2173,6 +2335,29 @@ const getTextContent = content => {
   return textParts.join('\n');
 };
 
+const getOpenApiErrorDetails = async response => {
+  let parsed;
+  try {
+    parsed = await response.json();
+  } catch {
+    return {};
+  }
+  if (!parsed || typeof parsed !== 'object') {
+    return {};
+  }
+  const error = Reflect.get(parsed, 'error');
+  if (!error || typeof error !== 'object') {
+    return {};
+  }
+  const errorCode = Reflect.get(error, 'code');
+  const errorMessage = Reflect.get(error, 'message');
+  const errorType = Reflect.get(error, 'type');
+  return {
+    errorCode: typeof errorCode === 'string' ? errorCode : undefined,
+    errorMessage: typeof errorMessage === 'string' ? errorMessage : undefined,
+    errorType: typeof errorType === 'string' ? errorType : undefined
+  };
+};
 const getOpenApiAssistantText = async (messages, modelId, openApiApiKey, openApiApiBaseUrl) => {
   let response;
   try {
@@ -2197,8 +2382,16 @@ const getOpenApiAssistantText = async (messages, modelId, openApiApiKey, openApi
     };
   }
   if (!response.ok) {
+    const {
+      errorCode,
+      errorMessage,
+      errorType
+    } = await getOpenApiErrorDetails(response);
     return {
       details: 'http-error',
+      errorCode,
+      errorMessage,
+      errorType,
       statusCode: response.status,
       type: 'error'
     };
@@ -2246,6 +2439,51 @@ const getOpenApiAssistantText = async (messages, modelId, openApiApiKey, openApi
   };
 };
 
+const getOpenApiErrorMessage = errorResult => {
+  switch (errorResult.details) {
+    case 'http-error':
+      {
+        const errorMessage = errorResult.errorMessage?.trim();
+        const hasErrorCode = typeof errorResult.errorCode === 'string' && errorResult.errorCode.length > 0;
+        const hasErrorType = typeof errorResult.errorType === 'string' && errorResult.errorType.length > 0;
+        if (errorResult.statusCode === 429) {
+          let prefix = 'OpenAI rate limit exceeded (429)';
+          if (hasErrorCode) {
+            prefix = `OpenAI rate limit exceeded (429: ${errorResult.errorCode})`;
+          }
+          if (hasErrorType) {
+            prefix += ` [${errorResult.errorType}]`;
+          }
+          prefix += '.';
+          if (!errorMessage) {
+            return prefix;
+          }
+          return `${prefix} ${errorMessage}`;
+        }
+        if (typeof errorResult.statusCode === 'number') {
+          let prefix = `OpenAI request failed (status ${errorResult.statusCode})`;
+          if (hasErrorCode) {
+            prefix += `: ${errorResult.errorCode}`;
+          }
+          if (hasErrorType) {
+            prefix += ` [${errorResult.errorType}]`;
+          }
+          prefix += '.';
+          if (!errorMessage) {
+            return prefix;
+          }
+          return `${prefix} ${errorMessage}`;
+        }
+        if (errorMessage) {
+          return `OpenAI request failed. ${errorMessage}`;
+        }
+        return openApiRequestFailedMessage;
+      }
+    case 'request-failed':
+      return openApiRequestFailedMessage;
+  }
+};
+
 const getOpenApiModelId = selectedModelId => {
   const openApiPrefix = 'openapi/';
   const openAiPrefix = 'openai/';
@@ -2425,36 +2663,6 @@ const getOpenRouterAssistantText = async (messages, modelId, openRouterApiKey, o
   };
 };
 
-/* eslint-disable @cspell/spellchecker */
-const getOpenRouterModelId = selectedModelId => {
-  const openRouterPrefix = 'openrouter/';
-  if (selectedModelId.toLowerCase().startsWith(openRouterPrefix)) {
-    return selectedModelId.slice(openRouterPrefix.length);
-  }
-  return selectedModelId;
-};
-
-const isOpenApiModel = (selectedModelId, models) => {
-  const selectedModel = models.find(model => model.id === selectedModelId);
-  const normalizedProvider = selectedModel?.provider?.toLowerCase();
-  if (normalizedProvider === 'openapi' || normalizedProvider === 'openai' || normalizedProvider === 'open-ai') {
-    return true;
-  }
-  const normalizedModelId = selectedModelId.toLowerCase();
-  return normalizedModelId.startsWith('openapi/') || normalizedModelId.startsWith('openai/');
-};
-
-/* eslint-disable @cspell/spellchecker */
-
-const isOpenRouterModel = (selectedModelId, models) => {
-  const selectedModel = models.find(model => model.id === selectedModelId);
-  const normalizedProvider = selectedModel?.provider?.toLowerCase();
-  if (normalizedProvider === 'openrouter' || normalizedProvider === 'open-router') {
-    return true;
-  }
-  return selectedModelId.toLowerCase().startsWith('openrouter/');
-};
-
 const getOpenRouterTooManyRequestsMessage = errorResult => {
   const details = [];
   if (errorResult.rawMessage) {
@@ -2487,6 +2695,7 @@ const getOpenRouterTooManyRequestsMessage = errorResult => {
   }
   return `${openRouterTooManyRequestsMessage} ${details.join(' ')}`;
 };
+
 const getOpenRouterErrorMessage = errorResult => {
   switch (errorResult.details) {
     case 'http-error':
@@ -2496,115 +2705,52 @@ const getOpenRouterErrorMessage = errorResult => {
       return getOpenRouterTooManyRequestsMessage(errorResult);
   }
 };
-const getOpenApiErrorMessage = errorResult => {
-  switch (errorResult.details) {
-    case 'http-error':
-    case 'request-failed':
-      return openApiRequestFailedMessage;
-  }
-};
-const normalizeLimitInfo = value => {
-  if (!value || typeof value !== 'object') {
-    return undefined;
+
+/* eslint-disable @cspell/spellchecker */
+const getOpenRouterModelId = selectedModelId => {
+  const openRouterPrefix = 'openrouter/';
+  if (selectedModelId.toLowerCase().startsWith(openRouterPrefix)) {
+    return selectedModelId.slice(openRouterPrefix.length);
   }
-  const limitRemaining = Reflect.get(value, 'limitRemaining');
-  const limitReset = Reflect.get(value, 'limitReset');
-  const retryAfter = Reflect.get(value, 'retryAfter');
-  const usage = Reflect.get(value, 'usage');
-  const usageDaily = Reflect.get(value, 'usageDaily');
-  const normalized = {
-    limitRemaining: typeof limitRemaining === 'number' || limitRemaining === null ? limitRemaining : undefined,
-    limitReset: typeof limitReset === 'string' || limitReset === null ? limitReset : undefined,
-    retryAfter: typeof retryAfter === 'string' || retryAfter === null ? retryAfter : undefined,
-    usage: typeof usage === 'number' ? usage : undefined,
-    usageDaily: typeof usageDaily === 'number' ? usageDaily : undefined
-  };
-  const hasDetails = normalized.limitRemaining !== undefined || normalized.limitReset !== undefined || normalized.retryAfter !== undefined || normalized.usage !== undefined || normalized.usageDaily !== undefined;
-  return hasDetails ? normalized : undefined;
+  return selectedModelId;
 };
-const normalizeMockResult = value => {
-  if (typeof value === 'string') {
-    return {
-      text: value,
-      type: 'success'
-    };
-  }
-  if (!value || typeof value !== 'object') {
-    return {
-      details: 'request-failed',
-      type: 'error'
-    };
-  }
-  const type = Reflect.get(value, 'type');
-  if (type === 'success') {
-    const text = Reflect.get(value, 'text');
-    if (typeof text === 'string') {
-      return {
-        text,
-        type: 'success'
-      };
-    }
-    return {
-      details: 'request-failed',
-      type: 'error'
-    };
-  }
-  if (type === 'error') {
-    const details = Reflect.get(value, 'details');
-    if (details === 'request-failed' || details === 'too-many-requests' || details === 'http-error') {
-      const rawMessage = Reflect.get(value, 'rawMessage');
-      const statusCode = Reflect.get(value, 'statusCode');
-      return {
-        details,
-        limitInfo: normalizeLimitInfo(Reflect.get(value, 'limitInfo')),
-        rawMessage: typeof rawMessage === 'string' ? rawMessage : undefined,
-        statusCode: typeof statusCode === 'number' ? statusCode : undefined,
-        type: 'error'
-      };
-    }
-  }
-  const text = Reflect.get(value, 'text');
-  if (typeof text === 'string') {
-    return {
-      text,
-      type: 'success'
-    };
+
+const isOpenApiModel = (selectedModelId, models) => {
+  const selectedModel = models.find(model => model.id === selectedModelId);
+  const normalizedProvider = selectedModel?.provider?.toLowerCase();
+  if (normalizedProvider === 'openapi' || normalizedProvider === 'openai' || normalizedProvider === 'open-ai') {
+    return true;
   }
-  return {
-    details: 'request-failed',
-    type: 'error'
-  };
+  const normalizedModelId = selectedModelId.toLowerCase();
+  return normalizedModelId.startsWith('openapi/') || normalizedModelId.startsWith('openai/');
 };
-const getMockOpenRouterAssistantText = async (messages, modelId, openRouterApiBaseUrl, openRouterApiKey, mockApiCommandId, assetDir, platform) => {
-  if (!mockApiCommandId) {
-    return {
-      details: 'request-failed',
-      type: 'error'
-    };
-  }
-  try {
-    const result = await executeProvider({
-      assetDir,
-      event: `onCommand:${mockApiCommandId}`,
-      method: CommandExecute,
-      noProviderFoundMessage: 'No mock api command found',
-      params: [mockApiCommandId, {
-        messages,
-        modelId,
-        openRouterApiBaseUrl,
-        openRouterApiKey
-      }],
-      platform
-    });
-    return normalizeMockResult(result);
-  } catch {
-    return {
-      details: 'request-failed',
-      type: 'error'
-    };
+
+/* eslint-disable @cspell/spellchecker */
+
+const isOpenRouterModel = (selectedModelId, models) => {
+  const selectedModel = models.find(model => model.id === selectedModelId);
+  const normalizedProvider = selectedModel?.provider?.toLowerCase();
+  if (normalizedProvider === 'openrouter' || normalizedProvider === 'open-router') {
+    return true;
   }
+  return selectedModelId.toLowerCase().startsWith('openrouter/');
 };
-const getAiResponse = async (userText, messages, nextMessageId, selectedModelId, models, openApiApiKey, openApiApiBaseUrl, openRouterApiKey, openRouterApiBaseUrl, useMockApi, mockApiCommandId, assetDir, platform) => {
+
+const getAiResponse = async ({
+  assetDir,
+  messages,
+  mockApiCommandId,
+  models,
+  nextMessageId,
+  openApiApiBaseUrl,
+  openApiApiKey,
+  openRouterApiBaseUrl,
+  openRouterApiKey,
+  platform,
+  selectedModelId,
+  useMockApi,
+  userText
+}) => {
   let text = '';
   const usesOpenApiModel = isOpenApiModel(selectedModelId, models);
   const usesOpenRouterModel = isOpenRouterModel(selectedModelId, models);
@@ -2706,7 +2852,21 @@ const handleClickSaveOpenApiApiKey = async state => {
     return updatedState;
   }
   const retryMessages = session.messages.slice(0, -1);
-  const assistantMessage = await getAiResponse(previousUserMessage.text, retryMessages, updatedState.nextMessageId, updatedState.selectedModelId, updatedState.models, updatedState.openApiApiKey, updatedState.openApiApiBaseUrl, updatedState.openRouterApiKey, updatedState.openRouterApiBaseUrl, updatedState.useMockApi, updatedState.mockApiCommandId, updatedState.assetDir, updatedState.platform);
+  const assistantMessage = await getAiResponse({
+    assetDir: updatedState.assetDir,
+    messages: retryMessages,
+    mockApiCommandId: updatedState.mockApiCommandId,
+    models: updatedState.models,
+    nextMessageId: updatedState.nextMessageId,
+    openApiApiBaseUrl: updatedState.openApiApiBaseUrl,
+    openApiApiKey: updatedState.openApiApiKey,
+    openRouterApiBaseUrl: updatedState.openRouterApiBaseUrl,
+    openRouterApiKey: updatedState.openRouterApiKey,
+    platform: updatedState.platform,
+    selectedModelId: updatedState.selectedModelId,
+    useMockApi: updatedState.useMockApi,
+    userText: previousUserMessage.text
+  });
   const updatedSession = {
     ...session,
     messages: [...session.messages.slice(0, -1), assistantMessage]
@@ -2746,7 +2906,18 @@ const handleClickSaveOpenRouterApiKey = async state => {
   if (!openRouterApiKey) {
     return state;
   }
-  const updatedState = await setOpenRouterApiKey(state, openRouterApiKey);
+  const optimisticState = {
+    ...state,
+    openRouterApiKeyState: 'saving'
+  };
+  set(state.uid, state, optimisticState);
+  // @ts-ignore
+  await invoke('Chat.rerender');
+  const persistedState = await setOpenRouterApiKey(optimisticState, openRouterApiKey);
+  const updatedState = {
+    ...persistedState,
+    openRouterApiKeyState: 'idle'
+  };
   const session = updatedState.sessions.find(item => item.id === updatedState.selectedSessionId);
   if (!session) {
     return updatedState;
@@ -2761,9 +2932,21 @@ const handleClickSaveOpenRouterApiKey = async state => {
     return updatedState;
   }
   const retryMessages = session.messages.slice(0, -1);
-
-  // @ts-ignore
-  const assistantMessage = await getAiResponse(previousUserMessage.text, retryMessages, updatedState.nextMessageId, updatedState.selectedModelId, updatedState.models, updatedState.openApiApiKey, updatedState.openApiApiBaseUrl, openRouterApiKey, updatedState.openRouterApiBaseUrl, updatedState.useMockApi, updatedState.mockApiCommandId, updatedState.assetDir, updatedState.platform);
+  const assistantMessage = await getAiResponse({
+    assetDir: updatedState.assetDir,
+    messages: retryMessages,
+    mockApiCommandId: updatedState.mockApiCommandId,
+    models: updatedState.models,
+    nextMessageId: updatedState.nextMessageId,
+    openApiApiBaseUrl: updatedState.openApiApiBaseUrl,
+    openApiApiKey: updatedState.openApiApiKey,
+    openRouterApiBaseUrl: updatedState.openRouterApiBaseUrl,
+    openRouterApiKey,
+    platform: updatedState.platform,
+    selectedModelId: updatedState.selectedModelId,
+    useMockApi: updatedState.useMockApi,
+    userText: previousUserMessage.text
+  });
   const updatedSession = {
     ...session,
     messages: [...session.messages.slice(0, -1), assistantMessage]
@@ -2778,6 +2961,7 @@ const handleClickSaveOpenRouterApiKey = async state => {
   return {
     ...updatedState,
     nextMessageId: updatedState.nextMessageId + 1,
+    openRouterApiKeyState: 'idle',
     sessions: updatedSessions
   };
 };
@@ -2845,6 +3029,7 @@ const handleSubmit = async state => {
     await saveChatSession(newSession);
     optimisticState = focusInput({
       ...state,
+      composerHeight: getMinComposerHeightForState(state),
       composerValue: '',
       inputSource: 'script',
       lastSubmittedSessionId: newSessionId,
@@ -2869,6 +3054,7 @@ const handleSubmit = async state => {
     }
     optimisticState = focusInput({
       ...state,
+      composerHeight: getMinComposerHeightForState(state),
       composerValue: '',
       inputSource: 'script',
       lastSubmittedSessionId: selectedSessionId,
@@ -2881,7 +3067,21 @@ const handleSubmit = async state => {
   await invoke('Chat.rerender');
   const selectedOptimisticSession = optimisticState.sessions.find(session => session.id === optimisticState.selectedSessionId);
   const messages = selectedOptimisticSession?.messages ?? [];
-  const assistantMessage = await getAiResponse(userText, messages, optimisticState.nextMessageId, selectedModelId, models, openApiApiKey, openApiApiBaseUrl, openRouterApiKey, openRouterApiBaseUrl, useMockApi, mockApiCommandId, assetDir, platform);
+  const assistantMessage = await getAiResponse({
+    assetDir,
+    messages,
+    mockApiCommandId,
+    models,
+    nextMessageId: optimisticState.nextMessageId,
+    openApiApiBaseUrl,
+    openApiApiKey,
+    openRouterApiBaseUrl,
+    openRouterApiKey,
+    platform,
+    selectedModelId,
+    useMockApi,
+    userText
+  });
   const updatedSessions = optimisticState.sessions.map(session => {
     if (session.id !== optimisticState.selectedSessionId) {
       return session;
@@ -3086,8 +3286,10 @@ const handleInput = async (state, name, value, inputSource = 'user') => {
   if (name !== Composer) {
     return state;
   }
+  const composerHeight = await getComposerHeight(state, value);
   return {
     ...state,
+    composerHeight,
     composerValue: value,
     inputSource
   };
@@ -3152,6 +3354,7 @@ const submitRename = async state => {
   }
   return {
     ...state,
+    composerHeight: getMinComposerHeightForState(state),
     composerValue: '',
     inputSource: 'script',
     renamingSessionId: '',
@@ -3549,7 +3752,7 @@ const getUsageOverviewDom = (tokensUsed, tokensMax) => {
   }, text(usageLabel)];
 };
 
-const getChatSendAreaDom = (composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
+const getChatSendAreaDom = (composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20) => {
   const isSendDisabled = composerValue.trim() === '';
   const modelOptions = models.flatMap(model => getModelOptionDOm(model, selectedModelId));
   return [{
@@ -3567,7 +3770,7 @@ const getChatSendAreaDom = (composerValue, models, selectedModelId, usageOvervie
     onFocus: HandleFocus,
     onInput: HandleInput,
     placeholder: composePlaceholder(),
-    rows: 4,
+    style: `height:${composerHeight}px;font-size:${composerFontSize}px;font-family:${composerFontFamily};line-height:${composerLineHeight}px;`,
     type: TextArea,
     value: composerValue
   }, {
@@ -3662,7 +3865,9 @@ const getMissingApiKeyDom = ({
   inputValue,
   openSettingsButtonName,
   placeholder,
-  saveButtonName
+  saveButtonDisabled = false,
+  saveButtonName,
+  saveButtonText = save()
 }) => {
   return [{
     childCount: 2,
@@ -3682,10 +3887,11 @@ const getMissingApiKeyDom = ({
   }, {
     childCount: 1,
     className: mergeClassNames(Button, ButtonPrimary),
+    disabled: saveButtonDisabled,
     name: saveButtonName,
     onClick: HandleClick,
     type: Button$1
-  }, text(save()), {
+  }, text(saveButtonText), {
     childCount: 1,
     className: mergeClassNames(Button, ButtonSecondary),
     name: openSettingsButtonName,
@@ -3705,14 +3911,17 @@ const getMissingOpenApiApiKeyDom = openApiApiKeyInput => {
   });
 };
 
-const getMissingOpenRouterApiKeyDom = openRouterApiKeyInput => {
+const getMissingOpenRouterApiKeyDom = (openRouterApiKeyInput, openRouterApiKeyState = 'idle') => {
+  const isSaving = openRouterApiKeyState === 'saving';
   return getMissingApiKeyDom({
     getApiKeyText: getOpenRouterApiKey(),
     inputName: OpenRouterApiKeyInput,
     inputValue: openRouterApiKeyInput,
     openSettingsButtonName: OpenOpenRouterApiKeySettings,
     placeholder: openRouterApiKeyPlaceholder(),
-    saveButtonName: SaveOpenRouterApiKey
+    saveButtonDisabled: isSaving,
+    saveButtonName: SaveOpenRouterApiKey,
+    saveButtonText: isSaving ? saving() : save()
   });
 };
 
@@ -3742,7 +3951,7 @@ const getOpenRouterTooManyRequestsDom = () => {
     }, text(reason)];
   })];
 };
-const getChatMessageDom = (message, openRouterApiKeyInput, openApiApiKeyInput = '') => {
+const getChatMessageDom = (message, openRouterApiKeyInput, openApiApiKeyInput = '', openRouterApiKeyState = 'idle') => {
   const roleClassName = message.role === 'user' ? MessageUser : MessageAssistant;
   const isOpenApiApiKeyMissingMessage = message.role === 'assistant' && message.text === openApiApiKeyRequiredMessage;
   const isOpenRouterApiKeyMissingMessage = message.role === 'assistant' && message.text === openRouterApiKeyRequiredMessage;
@@ -3761,7 +3970,7 @@ const getChatMessageDom = (message, openRouterApiKeyInput, openApiApiKeyInput =
     childCount: 1,
     className: Markdown,
     type: P
-  }, text(message.text), ...(isOpenApiApiKeyMissingMessage ? getMissingOpenApiApiKeyDom(openApiApiKeyInput) : []), ...(isOpenRouterApiKeyMissingMessage ? getMissingOpenRouterApiKeyDom(openRouterApiKeyInput) : []), ...(isOpenRouterRequestFailedMessage ? getOpenRouterRequestFailedDom() : []), ...(isOpenRouterTooManyRequestsMessage ? getOpenRouterTooManyRequestsDom() : [])];
+  }, text(message.text), ...(isOpenApiApiKeyMissingMessage ? getMissingOpenApiApiKeyDom(openApiApiKeyInput) : []), ...(isOpenRouterApiKeyMissingMessage ? getMissingOpenRouterApiKeyDom(openRouterApiKeyInput, openRouterApiKeyState) : []), ...(isOpenRouterRequestFailedMessage ? getOpenRouterRequestFailedDom() : []), ...(isOpenRouterTooManyRequestsMessage ? getOpenRouterTooManyRequestsDom() : [])];
 };
 
 const getEmptyMessagesDom = () => {
@@ -3772,7 +3981,7 @@ const getEmptyMessagesDom = () => {
   }, text(startConversation())];
 };
 
-const getMessagesDom = (messages, openRouterApiKeyInput, openApiApiKeyInput = '') => {
+const getMessagesDom = (messages, openRouterApiKeyInput, openApiApiKeyInput = '', openRouterApiKeyState = 'idle') => {
   if (messages.length === 0) {
     return getEmptyMessagesDom();
   }
@@ -3780,10 +3989,10 @@ const getMessagesDom = (messages, openRouterApiKeyInput, openApiApiKeyInput = ''
     childCount: messages.length,
     className: 'ChatMessages',
     type: Div
-  }, ...messages.flatMap(message => getChatMessageDom(message, openRouterApiKeyInput, openApiApiKeyInput))];
+  }, ...messages.flatMap(message => getChatMessageDom(message, openRouterApiKeyInput, openApiApiKeyInput, openRouterApiKeyState))];
 };
 
-const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
+const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openRouterApiKeyState = 'idle', composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20) => {
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
   const selectedSessionTitle = selectedSession?.title || chatTitle();
   const messages = selectedSession ? selectedSession.messages : [];
@@ -3791,7 +4000,7 @@ const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue,
     childCount: 3,
     className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages, openRouterApiKeyInput, openApiApiKeyInput), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax)];
+  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages, openRouterApiKeyInput, openApiApiKeyInput, openRouterApiKeyState), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight)];
 };
 
 const getChatHeaderListModeDom = () => {
@@ -3860,12 +4069,12 @@ const getChatListDom = (sessions, selectedSessionId) => {
   }, ...sessions.flatMap(getSessionDom)];
 };
 
-const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
+const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20) => {
   return [{
     childCount: 3,
     className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax)];
+  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight)];
 };
 
 const getChatModeUnsupportedVirtualDom = () => {
@@ -3875,12 +4084,12 @@ const getChatModeUnsupportedVirtualDom = () => {
   }, text(unknownViewMode())];
 };
 
-const getChatVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput = '') => {
+const getChatVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput = '', openRouterApiKeyState = 'idle', composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20) => {
   switch (viewMode) {
     case 'detail':
-      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
+      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight);
     case 'list':
-      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
+      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight);
     default:
       return getChatModeUnsupportedVirtualDom();
   }
@@ -3888,11 +4097,16 @@ const getChatVirtualDom = (sessions, selectedSessionId, composerValue, openRoute
 
 const renderItems = (oldState, newState) => {
   const {
+    composerFontFamily,
+    composerFontSize,
+    composerHeight,
+    composerLineHeight,
     composerValue,
     initial,
     models,
     openApiApiKeyInput,
     openRouterApiKeyInput,
+    openRouterApiKeyState,
     selectedModelId,
     selectedSessionId,
     sessions,
@@ -3905,7 +4119,7 @@ const renderItems = (oldState, newState) => {
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput);
+  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight);
   return [SetDom2, uid, dom];
 };
 
@@ -4016,6 +4230,7 @@ const reset = async state => {
   await clearChatSessions();
   return {
     ...state,
+    composerHeight: getMinComposerHeightForState(state),
     composerValue: '',
     openRouterApiKey: '',
     selectedSessionId: '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/chat-view",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Chat View Worker",
   "repository": {
     "type": "git",