aws-samples · maekawataiki · Sep 2, 2025 · Sep 1, 2025 · Sep 2, 2025 · tbrand
diff --git 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
@@ -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
@@ -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
@@ -447,6 +446,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 +722,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
@@ -22,7 +22,6 @@ chat:
   hint_ctrl_enter: Ctrl + Enter で送信
   history: 会話履歴
   initialize: 初期化
-  model_parameters: モデルパラメータ
   open_link: リンクを開く
   prompt_examples: プロンプト例
   save: 保存
@@ -357,6 +356,10 @@ generateText:
   result_placeholder: 生成された文章がここに表示されます
   source_info: 文章の元になる情報
   title: 文章生成
+inputs:
+  attachment: 添付ファイル
+  reasoning: 深く考える
+  setting: 設定
 landing:
   alert:
     description: >-
@@ -576,8 +579,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
@@ -19,7 +19,6 @@ chat:
   hint_ctrl_enter: Ctrl + Enter เพื่อส่ง
   history: ประวัติการสนทนา
   initialize: เริ่มต้นใหม่
-  model_parameters: พารามิเตอร์โมเดล
   open_link: เปิดลิงก์
   prompt_examples: ตัวอย่าง prompt
   save: บันทึก
@@ -606,7 +605,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
@@ -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
@@ -590,8 +589,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
@@ -17,7 +17,6 @@ chat:
   drop_files: 请拖放文件
   history: 对话历史
   initialize: 初始化
-  model_parameters: 模型参数
   open_link: 打开链接
   prompt_examples: 提示示例
   save: 保存
@@ -494,7 +493,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
@@ -0,0 +1,26 @@
+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 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}
+    </button>
+  );
+};
+
+export default ButtonToggle;
diff --git a/packages/web/src/components/InputChatContent.tsx b/packages/web/src/components/InputChatContent.tsx
@@ -1,22 +1,26 @@
 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';
 import useChat from '../hooks/useChat';
 import { useLocation } from 'react-router-dom';
 import Button from './Button';
+import ButtonIcon from './ButtonIcon';
 import {
   PiArrowsCounterClockwise,
   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 +39,9 @@ type Props = {
   fileLimit?: FileLimit;
   accept?: string[];
   canStop?: boolean;
+  reasoning?: boolean;
+  onReasoningSwitched?: () => void;
+  reasoningEnabled?: boolean;
 } & (
   | {
       hideReset?: false;
@@ -123,7 +130,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 +139,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 +197,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,45 +207,73 @@ const InputChatContent: React.FC<Props> = (props) => {
             onEnter={disabledSend ? undefined : props.onSend}
           />
         </div>
-        <div className="m-2 flex 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 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>
-              </label>
-            </div>
-          )}
-          {props.setting && (
+              </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={loading}
-              onClick={props.onSetting ?? (() => {})}
-              icon={<PiSlidersHorizontal />}
+              disabled={disabledSend}
+              loading={loading || uploading}
+              onClick={props.onSend}
+              icon={props.sendIcon}
+              canStop={props.canStop}
             />
-          )}
-          <ButtonSend
-            className=""
-            disabled={disabledSend}
-            loading={loading || uploading}
-            onClick={props.onSend}
-            icon={props.sendIcon}
-            canStop={props.canStop}
-          />
+          </div>
         </div>
 
         {!isEmpty && !props.resetDisabled && !props.hideReset && (