87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { SessionStatus } from "@/app/components/Realtime/types";
|
|
import { Paperclip, PhoneCall, Play, Stethoscope } from "lucide-react";
|
|
import { Loader2, X } from "lucide-react";
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
|
|
|
interface BottomToolbarProps {
|
|
sessionStatus: SessionStatus;
|
|
onToggleConnection: () => void;
|
|
isDoctor: boolean;
|
|
personality: IPersonality;
|
|
}
|
|
|
|
function BottomToolbar({
|
|
sessionStatus,
|
|
onToggleConnection,
|
|
isDoctor,
|
|
personality,
|
|
}: BottomToolbarProps) {
|
|
const isConnected = sessionStatus === "CONNECTED";
|
|
const isConnecting = sessionStatus === "CONNECTING";
|
|
|
|
function getConnectionButtonIcon() {
|
|
if (isConnected) return <X className="flex-shrink-0 h-4 w-4 md:h-4 md:w-4" size={12} />;
|
|
if (isConnecting) return <Loader2 className="flex-shrink-0 h-4 w-4 md:h-4 md:w-4" size={12} />;
|
|
return isDoctor ? <Stethoscope className="flex-shrink-0 h-4 w-4 md:h-4 md:w-4" size={12} /> : <PhoneCall className="flex-shrink-0 h-4 w-4 md:h-4 md:w-4" size={12} />;
|
|
}
|
|
|
|
function getConnectionButtonLabel() {
|
|
if (isConnected) return "Disconnect";
|
|
if (isConnecting) return "Connecting...";
|
|
return "Talk";
|
|
}
|
|
|
|
function getConnectionButtonLabelForDoctor() {
|
|
if (isConnected) return "Submit";
|
|
if (isConnecting) return "Connecting...";
|
|
return "Doctor chat";
|
|
}
|
|
|
|
const isDisabled = isConnecting || personality.provider === "gemini";
|
|
|
|
function getConnectionButtonClasses() {
|
|
const baseClasses = "text-white text-base p-2 w-fit rounded-full shadow-lg flex flex-row items-center justify-center gap-2 px-4";
|
|
// const cursorClass = isDisabled ? "cursor-not-allowed" : "cursor-pointer";
|
|
|
|
if (isDisabled) {
|
|
return `bg-gray-600 hover:bg-gray-700 ${baseClasses}`;
|
|
}
|
|
|
|
if (isConnected) {
|
|
// Connected -> label "Disconnect" -> red
|
|
return `bg-red-600 hover:bg-red-700 ${baseClasses}`;
|
|
}
|
|
// Disconnected or connecting -> label is either "Connect" or "Connecting" -> black
|
|
return `bg-black hover:bg-gray-900 ${baseClasses}`;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
onClick={() => {
|
|
onToggleConnection();
|
|
}}
|
|
className={getConnectionButtonClasses()}
|
|
disabled={isDisabled}
|
|
>
|
|
{getConnectionButtonIcon()}
|
|
{isDoctor ? getConnectionButtonLabelForDoctor() : getConnectionButtonLabel()}
|
|
</button>
|
|
</TooltipTrigger>
|
|
{isDisabled && (
|
|
<TooltipContent>
|
|
{personality.provider === "gemini" ? <p>Talk to Gemini on your Elato device.</p> : <p>Add an API key in Settings to chat with your AI character.</p>}
|
|
</TooltipContent>
|
|
)}
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default BottomToolbar;
|