1

src/components/AdventurePanel.tsx

@@ -1051,7 +1051,16 @@ export function AdventurePanel({
             </button>
           </div>
 
-          {canRefreshOptions && !shouldHideChoiceUi && (
+          {isNpcChatMode ? (
+            <button
+              type="button"
+              onClick={() => onExitNpcChat?.()}
+              aria-label="退出聊天"
+              className="inline-flex h-8 items-center gap-1.5 rounded-md border border-rose-300/20 bg-rose-500/10 px-2 text-rose-100 transition-colors hover:bg-rose-500/15"
+            >
+              <span className="text-xs leading-none">退出聊天</span>
+            </button>
+          ) : canRefreshOptions && !shouldHideChoiceUi ? (
             <button
               type="button"
               onClick={onRefreshOptions}
@@ -1064,7 +1073,7 @@ export function AdventurePanel({
               />
               <span className="text-xs leading-none">换一换</span>
             </button>
-          )}
+          ) : null}
         </div>
 
         <div className="space-y-2">
@@ -1082,7 +1091,8 @@ export function AdventurePanel({
           ) : shouldHideChoiceUi ? (
             <div className="p-4" aria-hidden="true" />
           ) : (
-            displayedOptions.map((option, index) => {
+            <>
+            {displayedOptions.map((option, index) => {
               const optionImpactSummary = getOptionImpactSummary(
                 option,
                 playerCharacter,
@@ -1146,24 +1156,59 @@ export function AdventurePanel({
                       className="h-3 w-3 opacity-70 transition-opacity group-hover:opacity-100"
                     />
                   </div>
-                  {getCompactOptionDetailText(option) && (
+                  {!isNpcChatMode && getCompactOptionDetailText(option) && (
                     <div className="mt-1 text-[10px] leading-relaxed text-zinc-500">
                       {getCompactOptionDetailText(option)}
                     </div>
                   )}
-                  {option.goalAffordance?.label && (
+                  {!isNpcChatMode && option.goalAffordance?.label && (
                     <div className={`mt-1 text-[10px] ${getOptionGoalAffordanceClass(option)}`}>
                       {option.goalAffordance.label}
                     </div>
                   )}
-                  {optionImpactSummary && (
+                  {!isNpcChatMode && optionImpactSummary && (
                     <div className="mt-1 text-[10px] text-zinc-500">
                       {optionImpactSummary}
                     </div>
                   )}
                 </button>
               );
-            })
+            })}
+            {isNpcChatMode ? (
+              <div className="pixel-nine-slice pixel-panel mt-1 border border-white/10 bg-black/25 p-2">
+                <div className="flex items-center gap-2">
+                  <input
+                    value={npcChatDraft}
+                    onChange={(event) => setNpcChatDraft(event.target.value)}
+                    onKeyDown={(event) => {
+                      if (
+                        event.key === 'Enter' &&
+                        !event.nativeEvent.isComposing
+                      ) {
+                        event.preventDefault();
+                        submitNpcChatDraft();
+                      }
+                    }}
+                    placeholder={
+                      npcChatState?.customInputPlaceholder ??
+                      '输入你想说的话'
+                    }
+                    className="h-9 flex-1 rounded-md border border-white/10 bg-black/35 px-3 text-sm text-zinc-100 outline-none placeholder:text-zinc-500 focus:border-amber-200/40"
+                    maxLength={80}
+                    disabled={isLoading}
+                  />
+                  <button
+                    type="button"
+                    onClick={submitNpcChatDraft}
+                    disabled={isLoading || !npcChatDraft.trim()}
+                    className="inline-flex h-9 shrink-0 items-center rounded-md border border-amber-300/20 bg-amber-500/10 px-3 text-xs text-amber-100 transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+                  >
+                    发送
+                  </button>
+                </div>
+              </div>
+            ) : null}
+            </>
           )}
         </div>
       </div>