Refactor TTS into FloatingTTSButton component with amber/orange styling (#162)

Author: chriswritescode-dev

frontend/src/components/message/FloatingTTSButton.tsx

@@ -0,0 +1,53 @@
+import { Volume2, VolumeX, Loader2 } from 'lucide-react'
+import { useTTS } from '@/hooks/useTTS'
+import { useMobile } from '@/hooks/useMobile'
+
+interface FloatingTTSButtonProps {
+  content: string
+}
+
+export function FloatingTTSButton({ content }: FloatingTTSButtonProps) {
+  const { speak, stop, isEnabled, isPlaying, isLoading, originalText } = useTTS()
+  const isMobile = useMobile()
+  
+  if (!isEnabled || !content.trim()) {
+    return null
+  }
+  
+  const isThisPlaying = (isPlaying || isLoading) && originalText === content
+  
+  const handleClick = () => {
+    if (isThisPlaying) {
+      stop()
+    } else {
+      speak(content)
+    }
+  }
+  
+  const buttonPosition = isMobile ? 'bottom-24' : 'bottom-20'
+  
+  return (
+    <button
+      onClick={handleClick}
+      className={`fixed ${buttonPosition} right-4 z-50 flex items-center gap-2 px-4 py-3 rounded-xl transition-all duration-200 active:scale-95 hover:scale-105 shadow-lg backdrop-blur-md ${
+        isThisPlaying
+          ? 'bg-gradient-to-br from-red-600 to-red-700 hover:from-red-500 hover:to-red-600 text-destructive-foreground border border-red-500/60 shadow-red-500/30'
+          : 'bg-gradient-to-br from-amber-500 to-orange-600 hover:from-amber-400 hover:to-orange-500 text-white border border-amber-400/60 shadow-amber-500/30'
+      }`}
+      title={isThisPlaying ? 'Stop playback' : 'Play last response'}
+      aria-label={isThisPlaying ? 'Stop playback' : 'Play last response'}
+      disabled={isLoading && originalText !== content}
+    >
+      {isLoading && isThisPlaying ? (
+        <Loader2 className="w-5 h-5 animate-spin" />
+      ) : isThisPlaying ? (
+        <VolumeX className="w-5 h-5" />
+      ) : (
+        <Volume2 className="w-5 h-5" />
+      )}
+      <span className="text-sm font-medium hidden sm:inline">
+        {isThisPlaying ? 'Stop' : 'Play Last'}
+      </span>
+    </button>
+  )
+}

frontend/src/components/message/MessagePart.tsx

@@ -1,8 +1,7 @@
 import { memo } from 'react'
 import type { components } from '@/api/opencode-types'
-import { Volume2, Loader2 } from 'lucide-react'
+import { Volume2, VolumeX, Loader2 } from 'lucide-react'
 import { TextPart } from './TextPart'
-import { SquareFill } from '@/components/ui/square-fill'
 import { PatchPart } from './PatchPart'
 import { ToolCallPart } from './ToolCallPart'
 import { RetryPart } from './RetryPart'
@@ -59,14 +58,12 @@ function getCopyableContent(part: Part, allParts?: Part[]): string {
   }
 }
 
-
-
 interface TTSButtonProps {
   content: string
   className?: string
 }
 
-export function TTSButton({ content, className = "" }: TTSButtonProps) {
+function TTSButton({ content, className = "" }: TTSButtonProps) {
   const { speak, stop, isEnabled, isPlaying, isLoading, originalText } = useTTS()
 
   if (!isEnabled || !content.trim()) {
@@ -93,16 +90,14 @@ export function TTSButton({ content, className = "" }: TTSButtonProps) {
       {isLoading && isThisPlaying ? (
         <Loader2 className="w-4 h-4 animate-spin" />
       ) : isThisPlaying ? (
-        <SquareFill className="w-4 h-4" />
+        <VolumeX className="w-4 h-4" />
       ) : (
         <Volume2 className="w-4 h-4" />
       )}
     </button>
   )
 }
 
-
-
 export const MessagePart = memo(function MessagePart({ part, role, allParts, partIndex, onFileClick, onChildSessionClick, messageTextContent }: MessagePartProps) {
   const copyableContent = getCopyableContent(part, allParts)
   const isMobile = useMobile()

frontend/src/pages/SessionDetail.tsx

@@ -4,7 +4,8 @@ import { useQuery } from "@tanstack/react-query";
 import { getRepo } from "@/api/repos";
 import { MessageThread } from "@/components/message/MessageThread";
 import { PromptInput, type PromptInputHandle } from "@/components/message/PromptInput";
-import { X, VolumeX, FolderOpen, Plug, Settings, CornerUpLeft, GitCommitHorizontal, Brain, ShieldOff, Code } from "lucide-react";
+import { FloatingTTSButton } from '@/components/message/FloatingTTSButton'
+import { X, FolderOpen, Plug, Settings, CornerUpLeft, GitCommitHorizontal, Brain, ShieldOff, Code } from "lucide-react";
 import { ModelSelectDialog } from "@/components/model/ModelSelectDialog";
 import { Header } from "@/components/ui/header";
 import { SessionList } from "@/components/session/SessionList";
@@ -130,13 +131,14 @@ export function SessionDetail() {
   const { open: openSettings } = useSettingsDialog();
   const { model, modelString } = useModelSelection(opcodeUrl, repoDirectory);
   const isEditingMessage = useUIState((state) => state.isEditingMessage);
-  const { isPlaying, stop } = useTTS();
+  const { isEnabled: ttsEnabled } = useTTS();
   const setSessionStatus = useSessionStatus((state) => state.setStatus);
   const { current: currentQuestion, reply: replyToQuestion, reject: rejectQuestion } = useQuestions();
 
   const sessionStatus = useSessionStatusForSession(sessionId);
   const isSessionActive = sessionStatus.type === 'busy' || sessionStatus.type === 'retry';
   const lastAssistantMessage = messages?.filter(m => m.info.role === 'assistant').at(-1);
+  const lastAssistantText = lastAssistantMessage?.parts.filter(p => p.type === 'text').map(p => p.text).join('\n\n') || '';
   const hasIncompleteMessages = lastAssistantMessage ? !('completed' in lastAssistantMessage.info.time && lastAssistantMessage.info.time.completed) : false;
   const hasActiveStream = hasIncompleteMessages && isSessionActive;
 
@@ -497,20 +499,9 @@ export function SessionDetail() {
                   <span className="text-sm font-medium">Waiting for shortcut key...</span>
                 </div>
               )}
-              {isPlaying && !leaderActive && (
-                <button
-                  onMouseDown={(e) => e.preventDefault()}
-                  onTouchEnd={(e) => {
-                    e.preventDefault()
-                    stop()
-                  }}
-                  onClick={stop}
-                  className="absolute -top-12 left-0 md:left-4 z-50 flex items-center gap-2 px-4 py-2 rounded-xl bg-gradient-to-br from-red-700 to-red-800 hover:from-red-600 hover:to-red-700 text-destructive-foreground border-2 border-red-600/80 hover:border-red-500 shadow-2xl shadow-red-600/40 hover:shadow-red-600/60 backdrop-blur-md transition-all duration-200 active:scale-95 hover:scale-105 ring-2 ring-red-600/30 hover:ring-red-600/50 animate-[pulse_2s_cubic-bezier(0.4,0,0.6,1)_infinite]"
-                  aria-label="Stop Audio"
-                >
-                  <VolumeX className="w-6 h-6" />
-                  <span className="text-sm font-medium hidden sm:inline">Stop Audio</span>
-                </button>
+
+              {ttsEnabled && lastAssistantText && !hasPromptContent && !hasActiveStream && (
+                <FloatingTTSButton content={lastAssistantText} />
               )}
               {currentQuestion && currentQuestion.sessionID === sessionId && (
                 <QuestionPrompt