From 6c89d31d29896c35a613ec0c8d3dd1883ecec8cc Mon Sep 17 00:00:00 2001
From: Taichiro Suzuki <taichirs@amazon.co.jp>
Date: Mon, 1 Sep 2025 13:42:05 +0900
Subject: [PATCH 1/2] fix

---
 packages/common/src/application/model.ts      |  9 +-
 packages/types/src/text.d.ts                  |  4 +-
 .../web/public/locales/translation/en.yaml    |  7 +-
 .../web/public/locales/translation/ja.yaml    |  7 +-
 .../web/public/locales/translation/th.yaml    |  1 -
 .../web/public/locales/translation/vi.yaml    |  3 +-
 .../web/public/locales/translation/zh.yaml    |  1 -
 packages/web/src/components/ButtonToggle.tsx  | 24 +++++
 .../web/src/components/InputChatContent.tsx   | 91 +++++++++++++------
 .../web/src/components/ModelParameters.tsx    | 60 +++---------
 packages/web/src/components/Tooltip.tsx       |  7 +-
 packages/web/src/pages/AgentChatPage.tsx      |  2 +-
 packages/web/src/pages/AgentCorePage.tsx      |  2 +-
 packages/web/src/pages/ChatPage.tsx           | 36 +++++++-
 packages/web/src/pages/FlowChatPage.tsx       |  2 +-
 packages/web/src/pages/McpChatPage.tsx        |  2 +-
 .../web/src/pages/RagKnowledgeBasePage.tsx    |  2 +-
 packages/web/src/pages/RagPage.tsx            |  2 +-
 packages/web/src/pages/VoiceChatPage.tsx      |  2 +-
 19 files changed, 161 insertions(+), 103 deletions(-)
 create mode 100644 packages/web/src/components/ButtonToggle.tsx

diff --git a/packages/common/src/application/model.ts b/packages/common/src/application/model.ts
index e63724924..59aec93fc 100644
--- a/packages/common/src/application/model.ts
+++ b/packages/common/src/application/model.ts
@@ -10,6 +10,13 @@ const MODEL_FEATURE: Record<string, FeatureFlags> = {
   // Model Feature Flags
   TEXT_ONLY: { text: true, doc: false, image: false, video: false },
   TEXT_DOC: { text: true, doc: true, image: false, video: false },
+  TEXT_DOC_REASONING: {
+    text: true,
+    doc: true,
+    image: false,
+    video: false,
+    reasoning: true,
+  },
   TEXT_DOC_IMAGE: { text: true, doc: true, image: true, video: false },
   TEXT_DOC_IMAGE_REASONING: {
     text: true,
@@ -375,7 +382,7 @@ export const modelMetadata: Record<string, ModelMetadata> = {
   },
   // DeepSeek
   'us.deepseek.r1-v1:0': {
-    flags: MODEL_FEATURE.TEXT_DOC,
+    flags: MODEL_FEATURE.TEXT_DOC_REASONING,
     displayName: 'DeepSeek-R1',
   },
   // Writer
diff --git a/packages/types/src/text.d.ts b/packages/types/src/text.d.ts
index 7737872d5..70d9a1827 100644
--- a/packages/types/src/text.d.ts
+++ b/packages/types/src/text.d.ts
@@ -20,9 +20,9 @@ export type UsecaseConverseInferenceParams = {
 };
 
 export type AdditionalModelRequestFields = {
-  reasoningConfig?: {
+  reasoningConfig: {
     type: 'enabled' | 'disabled';
-    budgetTokens?: number;
+    budgetTokens: number;
   };
 };
 
diff --git a/packages/web/public/locales/translation/en.yaml b/packages/web/public/locales/translation/en.yaml
index 13179521f..2c8e06687 100644
--- a/packages/web/public/locales/translation/en.yaml
+++ b/packages/web/public/locales/translation/en.yaml
@@ -447,6 +447,10 @@ generateText:
   result_placeholder: Generated text will be displayed here
   source_info: Source information for text
   title: Text Generation
+inputs:
+  attachment: Attachment
+  reasoning: Extended thinking
+  setting: Setting
 landing:
   alert:
     description: >-
@@ -719,8 +723,7 @@ meetingMinutes:
   transcript: Transcript
 model:
   parameters:
-    reasoning: Reasoning
-    reasoning_budget: Reasoning Budget
+    reasoning_budget: Token budget for extended thinking
 navigation:
   agentChat: Agent Chat
   chat: Chat
diff --git a/packages/web/public/locales/translation/ja.yaml b/packages/web/public/locales/translation/ja.yaml
index 63203da20..2c05eeb23 100644
--- a/packages/web/public/locales/translation/ja.yaml
+++ b/packages/web/public/locales/translation/ja.yaml
@@ -357,6 +357,10 @@ generateText:
   result_placeholder: 生成された文章がここに表示されます
   source_info: 文章の元になる情報
   title: 文章生成
+inputs:
+  attachment: 添付ファイル
+  reasoning: 深く考える
+  setting: 設定
 landing:
   alert:
     description: >-
@@ -576,8 +580,7 @@ meetingMinutes:
   transcript: 文字起こし
 model:
   parameters:
-    reasoning: Reasoning
-    reasoning_budget: Reasoning Budget
+    reasoning_budget: 深く考えるトークン数上限
 navigation:
   agentChat: Agent チャット
   chat: チャット
diff --git a/packages/web/public/locales/translation/th.yaml b/packages/web/public/locales/translation/th.yaml
index 91df40ea6..8c17fc491 100644
--- a/packages/web/public/locales/translation/th.yaml
+++ b/packages/web/public/locales/translation/th.yaml
@@ -606,7 +606,6 @@ meetingMinutes:
   transcript: บันทึกการถอดความ
 model:
   parameters:
-    reasoning: การให้เหตุผล
     reasoning_budget: งบประมาณการให้เหตุผล
 navigation:
   agentChat: Agent Chat
diff --git a/packages/web/public/locales/translation/vi.yaml b/packages/web/public/locales/translation/vi.yaml
index 17fa536f8..ca77b7130 100644
--- a/packages/web/public/locales/translation/vi.yaml
+++ b/packages/web/public/locales/translation/vi.yaml
@@ -590,8 +590,7 @@ meetingMinutes:
   transcript: Bản chuyển đổi
 model:
   parameters:
-    reasoning: Reasoning
-    reasoning_budget: Reasoning Budget
+    reasoning_budget: Token budget for extended thinking
 navigation:
   agentChat: Agent Chat
   chat: Chat
diff --git a/packages/web/public/locales/translation/zh.yaml b/packages/web/public/locales/translation/zh.yaml
index 0f8bee7ad..ae39ed5bd 100644
--- a/packages/web/public/locales/translation/zh.yaml
+++ b/packages/web/public/locales/translation/zh.yaml
@@ -494,7 +494,6 @@ meetingMinutes:
   transcript: 转录文本
 model:
   parameters:
-    reasoning: 推理
     reasoning_budget: 推理预算
 navigation:
   agentChat: Agent聊天
diff --git a/packages/web/src/components/ButtonToggle.tsx b/packages/web/src/components/ButtonToggle.tsx
new file mode 100644
index 000000000..5b1f66b18
--- /dev/null
+++ b/packages/web/src/components/ButtonToggle.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { BaseProps } from '../@types/common';
+
+type Props = BaseProps & {
+  onSwitch: () => void;
+  icon: React.ReactNode;
+  isEnabled: boolean;
+};
+
+const ButtonToggle: React.FC<Props> = (props) => {
+  return (
+    <button
+      className={`${
+        props.className ?? ''
+      } flex items-center justify-center rounded-xl p-2 text-xl text-white ${
+        props.isEnabled ? 'bg-aws-smile' : 'bg-gray-300'
+      }`}
+      onClick={props.onSwitch}>
+      {props.icon}
+    </button>
+  );
+};
+
+export default ButtonToggle;
diff --git a/packages/web/src/components/InputChatContent.tsx b/packages/web/src/components/InputChatContent.tsx
index 4f6a34fa3..c42e53189 100644
--- a/packages/web/src/components/InputChatContent.tsx
+++ b/packages/web/src/components/InputChatContent.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import ButtonSend from './ButtonSend';
+import ButtonToggle from './ButtonToggle';
 import Textarea from './Textarea';
 import ZoomUpImage from './ZoomUpImage';
 import ZoomUpVideo from './ZoomUpVideo';
@@ -11,12 +12,14 @@ import {
   PiPaperclip,
   PiSpinnerGap,
   PiSlidersHorizontal,
+  PiClockCountdownLight,
 } from 'react-icons/pi';
 import useFiles from '../hooks/useFiles';
 import FileCard from './FileCard';
 import { FileLimit } from 'generative-ai-use-cases';
 import { useTranslation } from 'react-i18next';
 import useUserSetting from '../hooks/useUserSetting';
+import Tooltip from './Tooltip';
 
 type Props = {
   content: string;
@@ -35,6 +38,9 @@ type Props = {
   fileLimit?: FileLimit;
   accept?: string[];
   canStop?: boolean;
+  reasoning?: boolean;
+  onReasoningSwitched?: () => void;
+  reasoningEnabled?: boolean;
 } & (
   | {
       hideReset?: false;
@@ -123,7 +129,7 @@ const InputChatContent: React.FC<Props> = (props) => {
         </p>
       )}
       <div
-        className={`relative flex items-end rounded-xl border border-black/10 bg-gray-100 shadow-[0_0_30px_1px] shadow-gray-400/40 ${
+        className={`relative flex flex-col rounded-xl border border-black/10 bg-gray-100 shadow-[0_0_30px_1px] shadow-gray-400/40 ${
           props.disableMarginBottom
             ? ''
             : settingSubmitCmdOrCtrlEnter
@@ -132,7 +138,7 @@ const InputChatContent: React.FC<Props> = (props) => {
         }`}>
         <div className="flex grow flex-col">
           {props.fileUpload && uploadedFiles.length > 0 && (
-            <div className="m-2 flex flex-wrap gap-2">
+            <div className="flex flex-wrap gap-2 p-2">
               {uploadedFiles.map((uploadedFile, idx) => {
                 if (uploadedFile.type === 'image') {
                   return (
@@ -190,7 +196,7 @@ const InputChatContent: React.FC<Props> = (props) => {
             </div>
           )}
           <Textarea
-            className={`scrollbar-thumb-gray-200 scrollbar-thin m-2 -mr-14 bg-transparent`}
+            className={`scrollbar-thumb-gray-200 scrollbar-thin -mr-14 bg-transparent p-4`}
             placeholder={props.placeholder ?? t('common.enter_text')}
             noBorder
             notItem
@@ -200,36 +206,61 @@ const InputChatContent: React.FC<Props> = (props) => {
             onEnter={disabledSend ? undefined : props.onSend}
           />
         </div>
-        <div className="m-2 flex gap-1">
+        <div className="m-2 flex justify-end gap-1">
           {props.fileUpload && (
-            <div className="">
-              <label>
-                <input
-                  hidden
-                  onChange={onChangeFiles}
-                  type="file"
-                  accept={props.accept?.join(',')}
-                  multiple
-                  value={[]}
-                />
-                <div
-                  className={`${uploading ? 'bg-gray-300' : 'bg-aws-smile cursor-pointer '} flex items-center justify-center rounded-xl p-2 align-bottom text-xl text-white`}>
-                  {uploading ? (
-                    <PiSpinnerGap className="animate-spin" />
-                  ) : (
-                    <PiPaperclip />
-                  )}
-                </div>
-              </label>
-            </div>
+            <Tooltip
+              message={t('inputs.attachment')}
+              position="center"
+              topPosition="-top-16"
+              nowrap>
+              <div className="">
+                <label>
+                  <input
+                    hidden
+                    onChange={onChangeFiles}
+                    type="file"
+                    accept={props.accept?.join(',')}
+                    multiple
+                    value={[]}
+                  />
+                  <div
+                    className={`${uploading ? 'bg-gray-300' : 'bg-aws-smile cursor-pointer '} flex items-center justify-center rounded-xl p-2 align-bottom text-xl text-white`}>
+                    {uploading ? (
+                      <PiSpinnerGap className="animate-spin" />
+                    ) : (
+                      <PiPaperclip />
+                    )}
+                  </div>
+                </label>
+              </div>
+            </Tooltip>
+          )}
+          {props.reasoning && (
+            <Tooltip
+              message={t('inputs.reasoning')}
+              position="center"
+              topPosition="-top-16"
+              nowrap>
+              <ButtonToggle
+                onSwitch={props.onReasoningSwitched ?? (() => {})}
+                icon={<PiClockCountdownLight />}
+                isEnabled={!!props.reasoningEnabled}
+              />
+            </Tooltip>
           )}
           {props.setting && (
-            <ButtonSend
-              className=""
-              disabled={loading}
-              onClick={props.onSetting ?? (() => {})}
-              icon={<PiSlidersHorizontal />}
-            />
+            <Tooltip
+              message={t('inputs.setting')}
+              position="center"
+              topPosition="-top-16"
+              nowrap>
+              <ButtonSend
+                className=""
+                disabled={loading}
+                onClick={props.onSetting ?? (() => {})}
+                icon={<PiSlidersHorizontal />}
+              />
+            </Tooltip>
           )}
           <ButtonSend
             className=""
diff --git a/packages/web/src/components/ModelParameters.tsx b/packages/web/src/components/ModelParameters.tsx
index 8586c3c15..78140edbd 100644
--- a/packages/web/src/components/ModelParameters.tsx
+++ b/packages/web/src/components/ModelParameters.tsx
@@ -2,20 +2,18 @@ import {
   AdditionalModelRequestFields,
   FeatureFlags,
 } from 'generative-ai-use-cases';
-import Switch from './Switch';
 import RangeSlider from './RangeSlider';
 import { useTranslation } from 'react-i18next';
 
-const DEFAULT_REASONING_BUDGET = 4096; // Claude 3.7 Sonnet recommended minimum value
 const MIN_REASONING_BUDGET = 1024; // Claude 3.7 Sonnet minimum value
 const MAX_REASONING_BUDGET = 32768; // Temporary value
 const REASONING_BUDGET_STEP = 1024;
 
 export const ModelParameters: React.FC<{
   modelFeatureFlags: FeatureFlags;
-  overrideModelParameters: AdditionalModelRequestFields | undefined;
+  overrideModelParameters: AdditionalModelRequestFields;
   setOverrideModelParameters: (
-    overrideModelParameters: AdditionalModelRequestFields | undefined
+    overrideModelParameters: AdditionalModelRequestFields
   ) => void;
 }> = ({
   modelFeatureFlags,
@@ -24,33 +22,16 @@ export const ModelParameters: React.FC<{
 }) => {
   const { t } = useTranslation();
 
-  const handleReasoningSwitch = (newValue: boolean) => {
-    setOverrideModelParameters({
-      ...overrideModelParameters,
-      reasoningConfig: newValue
-        ? {
-            type: 'enabled',
-            budgetTokens:
-              overrideModelParameters?.reasoningConfig?.budgetTokens ||
-              DEFAULT_REASONING_BUDGET,
-          }
-        : { type: 'disabled' },
-    });
-  };
-
   const handleReasoningBudgetChange = (value: number) => {
     setOverrideModelParameters({
       ...overrideModelParameters,
       reasoningConfig: {
-        type: 'enabled',
-        budgetTokens: value || DEFAULT_REASONING_BUDGET,
+        type: overrideModelParameters.reasoningConfig.type,
+        budgetTokens: value,
       },
     });
   };
 
-  const isReasoningEnabled =
-    overrideModelParameters?.reasoningConfig?.type === 'enabled';
-
   if (!modelFeatureFlags.reasoning) {
     return null;
   }
@@ -59,33 +40,16 @@ export const ModelParameters: React.FC<{
     <div>
       {modelFeatureFlags.reasoning && (
         <div>
+          <div className="mb-2">{t('model.parameters.reasoning_budget')}</div>
           <div>
-            <div>{t('model.parameters.reasoning')}</div>
-            <div>
-              <Switch
-                label=""
-                checked={isReasoningEnabled}
-                onSwitch={handleReasoningSwitch}
-              />
-            </div>
+            <RangeSlider
+              min={MIN_REASONING_BUDGET}
+              max={MAX_REASONING_BUDGET}
+              step={REASONING_BUDGET_STEP}
+              value={overrideModelParameters.reasoningConfig.budgetTokens}
+              onChange={handleReasoningBudgetChange}
+            />
           </div>
-          {overrideModelParameters?.reasoningConfig?.type === 'enabled' && (
-            <div>
-              <div>{t('model.parameters.reasoning_budget')}</div>
-              <div>
-                <RangeSlider
-                  min={MIN_REASONING_BUDGET}
-                  max={MAX_REASONING_BUDGET}
-                  step={REASONING_BUDGET_STEP}
-                  value={
-                    overrideModelParameters?.reasoningConfig?.budgetTokens ||
-                    DEFAULT_REASONING_BUDGET
-                  }
-                  onChange={handleReasoningBudgetChange}
-                />
-              </div>
-            </div>
-          )}
         </div>
       )}
     </div>
diff --git a/packages/web/src/components/Tooltip.tsx b/packages/web/src/components/Tooltip.tsx
index f99ff7740..a724d7def 100644
--- a/packages/web/src/components/Tooltip.tsx
+++ b/packages/web/src/components/Tooltip.tsx
@@ -4,7 +4,9 @@ import { BaseProps } from '../@types/common';
 type Props = BaseProps & {
   message: string;
   position?: 'left' | 'right' | 'center';
+  topPosition?: string;
   children: React.ReactNode;
+  nowrap?: boolean;
 };
 
 const Tooltip: React.FC<Props> = (props) => {
@@ -22,8 +24,9 @@ const Tooltip: React.FC<Props> = (props) => {
   return (
     <div className={`${props.className ?? ''} group relative`}>
       <div
-        className={`invisible absolute ${position} -top-5 z-50 bg-transparent p-3 pl-5 pt-8 text-xs font-normal text-white opacity-0 transition group-hover:visible group-hover:opacity-100`}>
-        <div className="w-64 rounded border border-gray-400 bg-black/90 p-1 ">
+        className={`invisible absolute ${position} ${props.topPosition ?? '-top-5'} z-50 bg-transparent p-3 pl-5 pt-8 text-xs font-normal text-white opacity-0 transition group-hover:visible group-hover:opacity-100`}>
+        <div
+          className={`${props.nowrap ? 'w-fit text-nowrap' : 'w-64'} rounded border border-gray-400 bg-black/70 p-1`}>
           {props.message}
         </div>
       </div>
diff --git a/packages/web/src/pages/AgentChatPage.tsx b/packages/web/src/pages/AgentChatPage.tsx
index 174a6e56c..5fa3d24c2 100644
--- a/packages/web/src/pages/AgentChatPage.tsx
+++ b/packages/web/src/pages/AgentChatPage.tsx
@@ -234,7 +234,7 @@ const AgentChatPage: React.FC = () => {
     <>
       <div
         onDragOver={handleDragOver}
-        className={`${!isEmpty ? 'screen:pb-36' : ''} relative`}>
+        className={`${!isEmpty ? 'screen:pb-48' : ''} relative`}>
         <div className="invisible my-0 flex h-0 items-center justify-center text-xl font-semibold lg:visible lg:my-5 lg:h-min print:visible print:my-5 print:h-min">
           {title}
         </div>
diff --git a/packages/web/src/pages/AgentCorePage.tsx b/packages/web/src/pages/AgentCorePage.tsx
index 5b65db182..deef95af8 100644
--- a/packages/web/src/pages/AgentCorePage.tsx
+++ b/packages/web/src/pages/AgentCorePage.tsx
@@ -237,7 +237,7 @@ const AgentCorePage: React.FC = () => {
     <>
       <div
         onDragOver={fileUpload ? handleDragOver : undefined}
-        className={`${!isEmpty ? 'screen:pb-36' : ''} relative`}>
+        className={`${!isEmpty ? 'screen:pb-48' : ''} relative`}>
         <div className="invisible my-0 flex h-0 items-center justify-center text-xl font-semibold lg:visible lg:my-5 lg:h-min print:visible print:my-5 print:h-min">
           {pageTitle}
         </div>
diff --git a/packages/web/src/pages/ChatPage.tsx b/packages/web/src/pages/ChatPage.tsx
index c3d6addb4..77f1f755f 100644
--- a/packages/web/src/pages/ChatPage.tsx
+++ b/packages/web/src/pages/ChatPage.tsx
@@ -83,6 +83,8 @@ const useChatPageState = create<StateType>((set) => {
   };
 });
 
+const DEFAULT_REASONING_BUDGET = 4096; // Claude 3.7 Sonnet recommended minimum value
+
 const ChatPage: React.FC = () => {
   const {
     content,
@@ -141,9 +143,13 @@ const ChatPage: React.FC = () => {
   const prompter = useMemo(() => {
     return getPrompter(modelId);
   }, [modelId]);
-  const [overrideModelParameters, setOverrideModelParameters] = useState<
-    AdditionalModelRequestFields | undefined
-  >(undefined);
+  const [overrideModelParameters, setOverrideModelParameters] =
+    useState<AdditionalModelRequestFields>({
+      reasoningConfig: {
+        type: 'disabled',
+        budgetTokens: DEFAULT_REASONING_BUDGET,
+      },
+    });
   const [showSetting, setShowSetting] = useState(false);
   const { t } = useTranslation();
   const [forceExpandPromptList, setForceExpandPromptList] = useState<
@@ -178,9 +184,16 @@ const ChatPage: React.FC = () => {
   const fileUpload = useMemo(() => {
     return accept.length > 0;
   }, [accept]);
-  const setting = useMemo(() => {
+  const reasoning = useMemo(() => {
     return MODELS.getModelMetadata(modelId).flags.reasoning ?? false;
   }, [modelId]);
+  const reasoningEnabled = useMemo(() => {
+    return overrideModelParameters.reasoningConfig.type === 'enabled';
+  }, [overrideModelParameters]);
+  // Currently, the settings modal is only used with the reasoning option
+  const setting = useMemo(() => {
+    return reasoning;
+  }, [reasoning]);
 
   useEffect(() => {
     const _modelId = !modelId ? availableModels[0] : modelId;
@@ -396,6 +409,16 @@ const ChatPage: React.FC = () => {
     }
   };
 
+  const onReasoningSwitched = useCallback(() => {
+    setOverrideModelParameters({
+      ...overrideModelParameters,
+      reasoningConfig: {
+        type: reasoningEnabled ? 'disabled' : 'enabled',
+        budgetTokens: overrideModelParameters.reasoningConfig.budgetTokens,
+      },
+    });
+  }, [reasoningEnabled, overrideModelParameters, setOverrideModelParameters]);
+
   const handleDragOver = (event: React.DragEvent) => {
     // When a file is dragged, display the overlay
     event.preventDefault();
@@ -427,7 +450,7 @@ const ChatPage: React.FC = () => {
     <>
       <div
         onDragOver={fileUpload ? handleDragOver : undefined}
-        className={`${!isEmpty ? 'screen:pb-36' : ''} relative`}>
+        className={`${!isEmpty ? 'screen:pb-48' : ''} relative`}>
         <div className="invisible my-0 flex h-0 items-center justify-center text-xl font-semibold lg:visible lg:my-5 lg:h-min print:visible print:my-5 print:h-min">
           {title}
         </div>
@@ -585,6 +608,9 @@ const ChatPage: React.FC = () => {
             fileUpload={fileUpload}
             fileLimit={fileLimit}
             accept={accept}
+            reasoning={reasoning}
+            onReasoningSwitched={onReasoningSwitched}
+            reasoningEnabled={reasoningEnabled}
             setting={setting}
             onSetting={() => {
               setShowSetting(true);
diff --git a/packages/web/src/pages/FlowChatPage.tsx b/packages/web/src/pages/FlowChatPage.tsx
index 5b19e7ac2..93b545757 100644
--- a/packages/web/src/pages/FlowChatPage.tsx
+++ b/packages/web/src/pages/FlowChatPage.tsx
@@ -62,7 +62,7 @@ const FlowChatPage: React.FC = () => {
   const isEmpty = messages.length === 0;
 
   return (
-    <div className={`${!isEmpty ? 'screen:pb-36' : ''} relative`}>
+    <div className={`${!isEmpty ? 'screen:pb-48' : ''} relative`}>
       <div className="invisible my-0 flex h-0 items-center justify-center text-xl font-semibold lg:visible lg:my-5 lg:h-min print:visible print:my-5 print:h-min">
         {t('flow.title')}
       </div>
diff --git a/packages/web/src/pages/McpChatPage.tsx b/packages/web/src/pages/McpChatPage.tsx
index 6747d2ad0..a2019f0d0 100644
--- a/packages/web/src/pages/McpChatPage.tsx
+++ b/packages/web/src/pages/McpChatPage.tsx
@@ -132,7 +132,7 @@ const McpChatPage: React.FC = () => {
   }, [showSystemContext, rawMessages, messages]);
 
   return (
-    <div className={`${!isEmpty ? 'screen:pb-36' : ''} relative`}>
+    <div className={`${!isEmpty ? 'screen:pb-48' : ''} relative`}>
       <div className="invisible my-0 flex h-0 items-center justify-center text-xl font-semibold lg:visible lg:my-5 lg:h-min print:visible print:my-5 print:h-min">
         {t('mcp_chat.title')}
       </div>
diff --git a/packages/web/src/pages/RagKnowledgeBasePage.tsx b/packages/web/src/pages/RagKnowledgeBasePage.tsx
index d3338f27c..d28137064 100644
--- a/packages/web/src/pages/RagKnowledgeBasePage.tsx
+++ b/packages/web/src/pages/RagKnowledgeBasePage.tsx
@@ -240,7 +240,7 @@ const RagKnowledgeBasePage: React.FC = () => {
 
   return (
     <>
-      <div className={`${!isEmpty ? 'screen:pb-36' : ''} relative`}>
+      <div className={`${!isEmpty ? 'screen:pb-48' : ''} relative`}>
         <div className="invisible my-0 flex h-0 items-center justify-center text-xl font-semibold lg:visible lg:my-5 lg:h-min print:visible print:my-5 print:h-min">
           {t('rag.title')}
         </div>
diff --git a/packages/web/src/pages/RagPage.tsx b/packages/web/src/pages/RagPage.tsx
index 7e0821163..5a405b8d1 100644
--- a/packages/web/src/pages/RagPage.tsx
+++ b/packages/web/src/pages/RagPage.tsx
@@ -76,7 +76,7 @@ const RagPage: React.FC = () => {
 
   return (
     <>
-      <div className={`${!isEmpty ? 'screen:pb-36' : ''} relative`}>
+      <div className={`${!isEmpty ? 'screen:pb-48' : ''} relative`}>
         <div className="invisible my-0 flex h-0 items-center justify-center text-xl font-semibold lg:visible lg:my-5 lg:h-min print:visible print:my-5 print:h-min">
           {t('rag.title')}
         </div>
diff --git a/packages/web/src/pages/VoiceChatPage.tsx b/packages/web/src/pages/VoiceChatPage.tsx
index 46a1c6e5b..1b3357895 100644
--- a/packages/web/src/pages/VoiceChatPage.tsx
+++ b/packages/web/src/pages/VoiceChatPage.tsx
@@ -81,7 +81,7 @@ const VoiceChatPage: React.FC = () => {
 
   return (
     <>
-      <div className={`${!isEmpty ? 'screen:pb-36' : ''} relative`}>
+      <div className={`${!isEmpty ? 'screen:pb-48' : ''} relative`}>
         <div className="invisible my-0 flex h-0 items-center justify-center text-xl font-semibold lg:visible lg:my-5 lg:h-min print:visible print:my-5 print:h-min">
           {t('voiceChat.title')}
         </div>

From fa4b64be4b4f2797d213f122d9a4750e8491107a Mon Sep 17 00:00:00 2001
From: Taichiro Suzuki <taichirs@amazon.co.jp>
Date: Tue, 2 Sep 2025 11:15:45 +0900
Subject: [PATCH 2/2] fix

---
 .../web/public/locales/translation/en.yaml    |   3 +-
 .../web/public/locales/translation/ja.yaml    |   1 -
 .../web/public/locales/translation/th.yaml    |   1 -
 .../web/public/locales/translation/vi.yaml    |   1 -
 .../web/public/locales/translation/zh.yaml    |   1 -
 packages/web/src/components/ButtonToggle.tsx  |   6 +-
 .../web/src/components/InputChatContent.tsx   | 132 +++++++++---------
 packages/web/src/pages/ChatPage.tsx           |  19 +--
 8 files changed, 80 insertions(+), 84 deletions(-)

diff --git a/packages/web/public/locales/translation/en.yaml b/packages/web/public/locales/translation/en.yaml
index 2c8e06687..b24c846f1 100644
--- a/packages/web/public/locales/translation/en.yaml
+++ b/packages/web/public/locales/translation/en.yaml
@@ -24,13 +24,12 @@ chat:
   hint_ctrl_enter: Ctrl + Enter to Submit
   history: Conversation History
   initialize: Initialize
-  model_parameters: Model Parameters
   open_link: Open Link
   prompt_examples: Prompt Examples
   save: Save
   saved_system_prompts: Saved System Prompts
   search_by_title: Search by title
-  settings: Settings
+  settings: Apply
   share: Share
   share_conversation: Share Conversation History
   sharing: Sharing
diff --git a/packages/web/public/locales/translation/ja.yaml b/packages/web/public/locales/translation/ja.yaml
index 2c05eeb23..8999742dd 100644
--- a/packages/web/public/locales/translation/ja.yaml
+++ b/packages/web/public/locales/translation/ja.yaml
@@ -22,7 +22,6 @@ chat:
   hint_ctrl_enter: Ctrl + Enter で送信
   history: 会話履歴
   initialize: 初期化
-  model_parameters: モデルパラメータ
   open_link: リンクを開く
   prompt_examples: プロンプト例
   save: 保存
diff --git a/packages/web/public/locales/translation/th.yaml b/packages/web/public/locales/translation/th.yaml
index 8c17fc491..cf71d58b4 100644
--- a/packages/web/public/locales/translation/th.yaml
+++ b/packages/web/public/locales/translation/th.yaml
@@ -19,7 +19,6 @@ chat:
   hint_ctrl_enter: Ctrl + Enter เพื่อส่ง
   history: ประวัติการสนทนา
   initialize: เริ่มต้นใหม่
-  model_parameters: พารามิเตอร์โมเดล
   open_link: เปิดลิงก์
   prompt_examples: ตัวอย่าง prompt
   save: บันทึก
diff --git a/packages/web/public/locales/translation/vi.yaml b/packages/web/public/locales/translation/vi.yaml
index ca77b7130..ee13ba5ee 100644
--- a/packages/web/public/locales/translation/vi.yaml
+++ b/packages/web/public/locales/translation/vi.yaml
@@ -19,7 +19,6 @@ chat:
   hint_ctrl_enter: Ctrl + Enter để gửi
   history: Lịch sử cuộc trò chuyện
   initialize: Khởi tạo
-  model_parameters: Tham số mô hình
   open_link: Mở liên kết
   prompt_examples: Ví dụ prompt
   save: Lưu
diff --git a/packages/web/public/locales/translation/zh.yaml b/packages/web/public/locales/translation/zh.yaml
index ae39ed5bd..48fd83736 100644
--- a/packages/web/public/locales/translation/zh.yaml
+++ b/packages/web/public/locales/translation/zh.yaml
@@ -17,7 +17,6 @@ chat:
   drop_files: 请拖放文件
   history: 对话历史
   initialize: 初始化
-  model_parameters: 模型参数
   open_link: 打开链接
   prompt_examples: 提示示例
   save: 保存
diff --git a/packages/web/src/components/ButtonToggle.tsx b/packages/web/src/components/ButtonToggle.tsx
index 5b1f66b18..53cd265b6 100644
--- a/packages/web/src/components/ButtonToggle.tsx
+++ b/packages/web/src/components/ButtonToggle.tsx
@@ -12,8 +12,10 @@ const ButtonToggle: React.FC<Props> = (props) => {
     <button
       className={`${
         props.className ?? ''
-      } flex items-center justify-center rounded-xl p-2 text-xl text-white ${
-        props.isEnabled ? 'bg-aws-smile' : 'bg-gray-300'
+      } flex items-center justify-center rounded-xl border bg-white p-2 text-xl ${
+        props.isEnabled
+          ? 'text-aws-smile border-aws-smile'
+          : 'border-gray-400 text-gray-400'
       }`}
       onClick={props.onSwitch}>
       {props.icon}
diff --git a/packages/web/src/components/InputChatContent.tsx b/packages/web/src/components/InputChatContent.tsx
index c42e53189..1a7249c9f 100644
--- a/packages/web/src/components/InputChatContent.tsx
+++ b/packages/web/src/components/InputChatContent.tsx
@@ -7,6 +7,7 @@ import ZoomUpVideo from './ZoomUpVideo';
 import useChat from '../hooks/useChat';
 import { useLocation } from 'react-router-dom';
 import Button from './Button';
+import ButtonIcon from './ButtonIcon';
 import {
   PiArrowsCounterClockwise,
   PiPaperclip,
@@ -206,70 +207,73 @@ const InputChatContent: React.FC<Props> = (props) => {
             onEnter={disabledSend ? undefined : props.onSend}
           />
         </div>
-        <div className="m-2 flex justify-end gap-1">
-          {props.fileUpload && (
-            <Tooltip
-              message={t('inputs.attachment')}
-              position="center"
-              topPosition="-top-16"
-              nowrap>
-              <div className="">
-                <label>
-                  <input
-                    hidden
-                    onChange={onChangeFiles}
-                    type="file"
-                    accept={props.accept?.join(',')}
-                    multiple
-                    value={[]}
-                  />
-                  <div
-                    className={`${uploading ? 'bg-gray-300' : 'bg-aws-smile cursor-pointer '} flex items-center justify-center rounded-xl p-2 align-bottom text-xl text-white`}>
-                    {uploading ? (
-                      <PiSpinnerGap className="animate-spin" />
-                    ) : (
-                      <PiPaperclip />
-                    )}
-                  </div>
-                </label>
-              </div>
-            </Tooltip>
-          )}
-          {props.reasoning && (
-            <Tooltip
-              message={t('inputs.reasoning')}
-              position="center"
-              topPosition="-top-16"
-              nowrap>
-              <ButtonToggle
-                onSwitch={props.onReasoningSwitched ?? (() => {})}
-                icon={<PiClockCountdownLight />}
-                isEnabled={!!props.reasoningEnabled}
-              />
-            </Tooltip>
-          )}
-          {props.setting && (
-            <Tooltip
-              message={t('inputs.setting')}
-              position="center"
-              topPosition="-top-16"
-              nowrap>
-              <ButtonSend
-                className=""
-                disabled={loading}
-                onClick={props.onSetting ?? (() => {})}
-                icon={<PiSlidersHorizontal />}
-              />
-            </Tooltip>
-          )}
-          <ButtonSend
-            className=""
-            disabled={disabledSend}
-            loading={loading || uploading}
-            onClick={props.onSend}
-            icon={props.sendIcon}
-            canStop={props.canStop}
-          />
+        <div className="m-2 flex justify-between gap-1">
+          <div className="flex gap-x-1">
+            {props.fileUpload && (
+              <Tooltip
+                message={t('inputs.attachment')}
+                position="center"
+                topPosition="-top-16"
+                nowrap>
+                <div className="">
+                  <label>
+                    <input
+                      hidden
+                      onChange={onChangeFiles}
+                      type="file"
+                      accept={props.accept?.join(',')}
+                      multiple
+                      value={[]}
+                    />
+                    <div
+                      className={`${uploading ? 'bg-gray-300' : 'cursor-pointer bg-white '} ${uploadedFiles.length > 0 ? 'text-aws-smile border-aws-smile' : 'border-gray-400 text-gray-400'} flex items-center justify-center rounded-xl border p-2 align-bottom text-xl`}>
+                      {uploading ? (
+                        <PiSpinnerGap className="animate-spin" />
+                      ) : (
+                        <PiPaperclip />
+                      )}
+                    </div>
+                  </label>
+                </div>
+              </Tooltip>
+            )}
+            {props.reasoning && (
+              <Tooltip
+                message={t('inputs.reasoning')}
+                position="center"
+                topPosition="-top-16"
+                nowrap>
+                <ButtonToggle
+                  onSwitch={props.onReasoningSwitched ?? (() => {})}
+                  icon={<PiClockCountdownLight />}
+                  isEnabled={!!props.reasoningEnabled}
+                />
+              </Tooltip>
+            )}
+          </div>
+          <div className="flex items-center gap-x-2">
+            {props.setting && (
+              <Tooltip
+                message={t('inputs.setting')}
+                position="center"
+                topPosition="-top-16"
+                nowrap>
+                <ButtonIcon
+                  onClick={props.onSetting ?? (() => {})}
+                  className="text-gray-500">
+                  <PiSlidersHorizontal />
+                </ButtonIcon>
+              </Tooltip>
+            )}
+            <ButtonSend
+              className=""
+              disabled={disabledSend}
+              loading={loading || uploading}
+              onClick={props.onSend}
+              icon={props.sendIcon}
+              canStop={props.canStop}
+            />
+          </div>
         </div>
 
         {!isEmpty && !props.resetDisabled && !props.hideReset && (
diff --git a/packages/web/src/pages/ChatPage.tsx b/packages/web/src/pages/ChatPage.tsx
index 77f1f755f..86deb1049 100644
--- a/packages/web/src/pages/ChatPage.tsx
+++ b/packages/web/src/pages/ChatPage.tsx
@@ -692,18 +692,13 @@ const ChatPage: React.FC = () => {
         }}
         title={t('chat.advanced_options')}>
         {setting && (
-          <ExpandableField
-            label={t('chat.model_parameters')}
-            className="relative w-full"
-            defaultOpened={true}>
-            <div className="">
-              <ModelParameters
-                modelFeatureFlags={MODELS.getModelMetadata(modelId).flags}
-                overrideModelParameters={overrideModelParameters}
-                setOverrideModelParameters={setOverrideModelParameters}
-              />
-            </div>
-          </ExpandableField>
+          <div className="">
+            <ModelParameters
+              modelFeatureFlags={MODELS.getModelMetadata(modelId).flags}
+              overrideModelParameters={overrideModelParameters}
+              setOverrideModelParameters={setOverrideModelParameters}
+            />
+          </div>
         )}
         <div className="mt-4 flex justify-end">
           <Button