5705726cfb
- Introduce a new `NetworkQualityIndicator` component to visually represent network quality status during calls. - Integrate the `NetworkQualityIndicator` into `AssistantPage` and `MobileCallPage`, enhancing user awareness of connection quality. - Update `use-voice-preview` hook to manage network quality metrics, improving overall call experience and performance monitoring.
71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { Wifi, WifiOff } from "lucide-react";
|
|
|
|
import type {
|
|
NetworkQuality,
|
|
VoicePreviewStatus,
|
|
} from "@/hooks/use-voice-preview";
|
|
|
|
const QUALITY_VIEW: Record<
|
|
NetworkQuality,
|
|
{ label: string; color: string; darkColor: string }
|
|
> = {
|
|
unknown: {
|
|
label: "检测中",
|
|
color: "text-muted-foreground",
|
|
darkColor: "text-white/55",
|
|
},
|
|
good: {
|
|
label: "网络良好",
|
|
color: "text-emerald-600",
|
|
darkColor: "text-emerald-300",
|
|
},
|
|
fair: {
|
|
label: "网络一般",
|
|
color: "text-amber-600",
|
|
darkColor: "text-amber-300",
|
|
},
|
|
poor: {
|
|
label: "网络较差",
|
|
color: "text-red-600",
|
|
darkColor: "text-red-300",
|
|
},
|
|
};
|
|
|
|
export function NetworkQualityIndicator({
|
|
quality,
|
|
status,
|
|
dark = false,
|
|
className = "",
|
|
}: {
|
|
quality: NetworkQuality;
|
|
status: VoicePreviewStatus;
|
|
dark?: boolean;
|
|
className?: string;
|
|
}) {
|
|
const connected = status === "connected";
|
|
const qualityView = QUALITY_VIEW[quality];
|
|
const view = connected
|
|
? {
|
|
label: qualityView.label,
|
|
color: dark ? qualityView.darkColor : qualityView.color,
|
|
}
|
|
: {
|
|
label: status === "connecting" ? "检测中" : "未连接",
|
|
color: dark ? "text-white/55" : "text-muted-foreground",
|
|
};
|
|
const Icon = connected || status === "connecting" ? Wifi : WifiOff;
|
|
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center gap-1.5 whitespace-nowrap text-xs ${view.color} ${className}`}
|
|
title={view.label}
|
|
aria-label={view.label}
|
|
>
|
|
<Icon className="size-3.5" aria-hidden="true" />
|
|
<span>{view.label}</span>
|
|
</span>
|
|
);
|
|
}
|