@johpaz/hive 1.7.2 → 1.7.3

package/packages/hive-ui/src/modules/channels/shared/ChannelCard.tsx

@@ -1,84 +0,0 @@
-import React from "react";
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Switch } from "@/components/ui/switch";
-import { Edit2, Settings, MessageSquare, Mic, Volume2 } from "lucide-react";
-import type { ConnectedChannel } from "@/types";
-
-interface ChannelCardProps {
-    channel: ConnectedChannel;
-    onEdit: (channel: ConnectedChannel) => void;
-    onToggle: (id: string, active: boolean) => void;
-}
-
-export function ChannelCard({ channel, onEdit, onToggle }: ChannelCardProps) {
-    const isConnected = channel.status === "connected";
-
-    return (
-        <div
-            onClick={() => onEdit(channel)}
-            className={`hive-card group transition-all duration-500 cursor-pointer ${isConnected
-                    ? 'hive-card--active border-emerald-500/20'
-                    : 'opacity-60 grayscale-[0.8] hover:opacity-100 hover:grayscale-0'
-                }`}
-        >
-            <div className="hive-card-body relative overflow-hidden">
-                <div className="flex items-start justify-between mb-8">
-                    <div className={`h-12 w-12 rounded-xl flex items-center justify-center border transition-all duration-500 ${isConnected
-                            ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400 shadow-[0_0_15px_rgba(16,185,129,0.2)]'
-                            : 'bg-white/5 border-white/10 text-white/30'
-                        }`}>
-                        <MessageSquare className="h-6 w-6" />
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                        {isConnected && (
-                            <span className="text-[9px] font-black tracking-widest text-emerald-500 shadow-emerald-glow">
-                                CONECTADO
-                            </span>
-                        )}
-                        <Switch
-                            checked={channel.active}
-                            onCheckedChange={(checked) => onToggle(channel.id, checked)}
-                            onClick={(e) => e.stopPropagation()}
-                            className="data-[state=checked]:bg-emerald-500 scale-75 origin-right"
-                        />
-                    </div>
-                </div>
-
-                <div className="space-y-4">
-                    <div>
-                        <h3 className="text-xl font-black text-white uppercase tracking-tighter mb-1 line-clamp-1 group-hover:text-emerald-400 transition-colors">
-                            {channel.type}
-                        </h3>
-                        <p className="text-[10px] text-white/20 font-black tracking-[0.2em] mb-4">
-                            ID: {channel.id.substring(0, 12).toUpperCase()}
-                        </p>
-                    </div>
-
-                    <div className="pt-4 border-t border-white/5 flex items-center gap-6">
-                        <div className="hive-stat">
-                            <span className="hive-stat__label">VOZ</span>
-                            <span className={`hive-stat__value ${channel.voice_enabled ? 'text-emerald-500' : 'text-white/20'}`}>
-                                {channel.voice_enabled ? "ON" : "OFF"}
-                            </span>
-                        </div>
-                        <div className="hive-stat">
-                            <span className="hive-stat__label">SÍNTESIS</span>
-                            <span className={`hive-stat__value ${channel.tts_enabled ? 'text-emerald-500' : 'text-white/20'}`}>
-                                {channel.tts_enabled ? "ON" : "OFF"}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-
-                {isConnected && (
-                    <div className="hive-glow-blob hive-glow-blob--emerald -bottom-10 -right-10 h-24 w-24 opacity-20" />
-                )}
-            </div>
-
-            <div className={`hive-strip--bottom ${isConnected ? 'bg-emerald-500' : 'bg-white/10'}`} />
-        </div>
-    );
-}

package/packages/hive-ui/src/modules/channels/shared/ChannelConfigDialog.tsx

@@ -1,279 +0,0 @@
-import React, { useState, useEffect } from "react";
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectLabel,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select";
-import { apiClient } from "@/lib/api";
-import type { ConnectedChannel } from "@/types";
-
-const STT_MODELS = [
-    { id: "whisper-large-v3-turbo", name: "Whisper Large V3 Turbo (Groq)", provider: "groq" },
-    { id: "whisper-large-v3", name: "Whisper Large V3 (Groq)", provider: "groq" },
-    { id: "distil-whisper-large-v3-en", name: "Distil Whisper V3 EN (Groq)", provider: "groq" },
-    { id: "whisper-1", name: "Whisper 1 (OpenAI)", provider: "openai" },
-];
-
-const TTS_MODELS = [
-    { group: "ElevenLabs", provider: "elevenlabs", models: [
-        { id: "eleven_flash_v2_5", name: "Flash v2.5" },
-        { id: "eleven_turbo_v2_5", name: "Turbo v2.5" },
-        { id: "eleven_multilingual_v2", name: "Multilingual v2" },
-        { id: "eleven_v3", name: "V3" },
-    ]},
-    { group: "OpenAI", provider: "openai", models: [
-        { id: "tts-1", name: "TTS-1" },
-        { id: "tts-1-hd", name: "TTS-1 HD" },
-        { id: "gpt-4o-mini-tts", name: "GPT-4o Mini TTS" },
-    ]},
-    { group: "Google Gemini", provider: "gemini", models: [
-        { id: "gemini-2.5-flash-preview-tts", name: "Gemini 2.5 Flash TTS" },
-        { id: "gemini-2.5-pro-preview-tts", name: "Gemini 2.5 Pro TTS" },
-    ]},
-    { group: "Qwen", provider: "qwen", models: [
-        { id: "qwen3-tts-instruct-flash", name: "Qwen3 TTS Instruct Flash" },
-        { id: "qwen3-tts-flash", name: "Qwen3 TTS Flash" },
-        { id: "qwen-tts", name: "Qwen TTS" },
-    ]},
-];
-
-function getProviderFromModel(modelId: string): string | null {
-    if (modelId.startsWith("eleven")) return "elevenlabs";
-    if (modelId.startsWith("tts-") || modelId.startsWith("gpt-")) return "openai";
-    if (modelId.startsWith("gemini")) return "gemini";
-    if (modelId.startsWith("qwen")) return "qwen";
-    return null;
-}
-
-interface ChannelConfigDialogProps {
-    channel: ConnectedChannel | null;
-    isOpen: boolean;
-    onClose: () => void;
-    onSave: (id: string, data: Partial<ConnectedChannel>) => Promise<void>;
-}
-
-export function ChannelConfigDialog({
-    channel,
-    isOpen,
-    onClose,
-    onSave,
-}: ChannelConfigDialogProps) {
-    const [formData, setFormData] = useState<Partial<ConnectedChannel>>({});
-    const [isSaving, setIsSaving] = useState(false);
-    const [voices, setVoices] = useState<Array<{ id: string; name: string }>>([]);
-    const [loadingVoices, setLoadingVoices] = useState(false);
-    const [configuredProviders, setConfiguredProviders] = useState<Record<string, boolean>>({});
-
-    useEffect(() => {
-        apiClient<Record<string, boolean>>("/api/voice/configured-providers", { showError: false })
-            .then(setConfiguredProviders)
-            .catch(() => setConfiguredProviders({}));
-    }, []);
-
-    useEffect(() => {
-        if (channel) {
-            setFormData(channel);
-        } else {
-            setFormData({
-                type: "telegram",
-                enabled: true,
-                active: false,
-                voice_enabled: false,
-                tts_enabled: false,
-            } as any);
-        }
-    }, [channel]);
-
-    useEffect(() => {
-        const provider = formData.tts_provider ? getProviderFromModel(formData.tts_provider) : null;
-        if (!provider) {
-            setVoices([]);
-            return;
-        }
-        setLoadingVoices(true);
-        apiClient<{ voices: Array<{ id: string; name: string }> }>(`/api/voice/${provider}/voices`, { showError: false })
-            .then(data => setVoices(data.voices || []))
-            .catch(() => setVoices([]))
-            .finally(() => setLoadingVoices(false));
-    }, [formData.tts_provider]);
-
-    const handleSave = async () => {
-        if (!channel?.id && !formData.type) return;
-
-        setIsSaving(true);
-        try {
-            await onSave(channel?.id || "new", formData);
-            onClose();
-        } catch (error) {
-            console.error("Save failed", error);
-        } finally {
-            setIsSaving(false);
-        }
-    };
-
-    return (
-        <Dialog open={isOpen} onOpenChange={onClose}>
-            <DialogContent className="sm:max-w-[500px]">
-                <DialogHeader>
-                    <DialogTitle>
-                        {channel ? `Configurar ${channel.type}` : "Añadir Nuevo Canal"}
-                    </DialogTitle>
-                    <DialogDescription>
-                        Ajusta las credenciales y el comportamiento del canal.
-                    </DialogDescription>
-                </DialogHeader>
-
-                <div className="grid gap-4 py-4">
-                    <div className="grid grid-cols-4 items-center gap-4">
-                        <Label htmlFor="type" className="text-right">Tipo</Label>
-                        <Select
-                            disabled={!!channel}
-                            value={formData.type}
-                            onValueChange={(v) => setFormData(prev => ({ ...prev, type: v as any }))}
-                        >
-                            <SelectTrigger className="col-span-3">
-                                <SelectValue placeholder="Selecciona un tipo" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="telegram">Telegram</SelectItem>
-                                <SelectItem value="whatsapp">WhatsApp</SelectItem>
-                                <SelectItem value="discord">Discord</SelectItem>
-                                <SelectItem value="webchat">WebChat</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
-
-                    <div className="grid grid-cols-4 items-center gap-4">
-                        <Label className="text-right">Voz</Label>
-                        <div className="flex items-center gap-2 col-span-3">
-                            <Switch
-                                checked={formData.voice_enabled}
-                                onCheckedChange={(v) => setFormData(prev => ({ ...prev, voice_enabled: v }))}
-                            />
-                            <span className="text-xs text-muted-foreground text-pretty">
-                                Habilitar procesamiento de notas de voz (STT)
-                            </span>
-                        </div>
-                    </div>
-
-                    <div className="grid grid-cols-4 items-center gap-4">
-                        <Label className="text-right">TTS</Label>
-                        <div className="flex items-center gap-2 col-span-3">
-                            <Switch
-                                checked={formData.tts_enabled}
-                                onCheckedChange={(v) => setFormData(prev => ({ ...prev, tts_enabled: v }))}
-                            />
-                            <span className="text-xs text-muted-foreground">
-                                Habilitar respuesta por voz (Text-to-Speech)
-                            </span>
-                        </div>
-                    </div>
-
-                    {formData.voice_enabled && (
-                        <div className="grid grid-cols-4 items-center gap-4">
-                            <Label className="text-right">Modelo STT</Label>
-                            <Select
-                                value={formData.stt_provider || ""}
-                                onValueChange={(v) => setFormData(prev => ({ ...prev, stt_provider: v }))}
-                            >
-                                <SelectTrigger className="col-span-3">
-                                    <SelectValue placeholder="Selecciona modelo STT" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    {STT_MODELS.filter(m => configuredProviders[m.provider]).map(m => (
-                                        <SelectItem key={m.id} value={m.id}>{m.name}</SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </Select>
-                        </div>
-                    )}
-
-                    {formData.tts_enabled && (
-                        <>
-                            <div className="grid grid-cols-4 items-center gap-4">
-                                <Label className="text-right">Modelo TTS</Label>
-                                <Select
-                                    value={formData.tts_provider || ""}
-                                    onValueChange={(v) => setFormData(prev => ({ ...prev, tts_provider: v, tts_voice_id: "" }))}
-                                >
-                                    <SelectTrigger className="col-span-3">
-                                        <SelectValue placeholder="Selecciona modelo TTS" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        {TTS_MODELS.filter(g => configuredProviders[g.provider]).map(group => (
-                                            <SelectGroup key={group.group}>
-                                                <SelectLabel>{group.group}</SelectLabel>
-                                                {group.models.map(m => (
-                                                    <SelectItem key={m.id} value={m.id}>{m.name}</SelectItem>
-                                                ))}
-                                            </SelectGroup>
-                                        ))}
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                            {formData.tts_provider && (
-                                <div className="grid grid-cols-4 items-center gap-4">
-                                    <Label className="text-right">Voz</Label>
-                                    <Select
-                                        value={formData.tts_voice_id || ""}
-                                        onValueChange={(v) => setFormData(prev => ({ ...prev, tts_voice_id: v }))}
-                                        disabled={loadingVoices || voices.length === 0}
-                                    >
-                                        <SelectTrigger className="col-span-3">
-                                            <SelectValue placeholder={loadingVoices ? "Cargando voces..." : "Selecciona una voz"} />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            {voices.map(v => (
-                                                <SelectItem key={v.id} value={v.id}>{v.name}</SelectItem>
-                                            ))}
-                                        </SelectContent>
-                                    </Select>
-                                </div>
-                            )}
-                        </>
-                    )}
-
-                    <div className="grid grid-cols-4 items-center gap-4">
-                        <Label htmlFor="delivery" className="text-right">Entrega</Label>
-                        <Select
-                            value={formData.step_delivery_mode}
-                            onValueChange={(v) => setFormData(prev => ({ ...prev, step_delivery_mode: v }))}
-                        >
-                            <SelectTrigger className="col-span-3">
-                                <SelectValue placeholder="Modo de entrega" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="new_messages">Solo Mensajes Nuevos</SelectItem>
-                                <SelectItem value="all">Todo (Sincronización)</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                </div>
-
-                <DialogFooter>
-                    <Button variant="outline" onClick={onClose} disabled={isSaving}>
-                        Cancelar
-                    </Button>
-                    <Button onClick={handleSave} disabled={isSaving}>
-                        {isSaving ? "Guardando..." : "Guardar Cambios"}
-                    </Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    );
-}

package/packages/hive-ui/src/modules/channels/shared/ChannelIcon.tsx

@@ -1,40 +0,0 @@
-import { MessageSquare, Phone, Hash, Slack, Shield, Smartphone, Globe, Grid3X3 } from "lucide-react";
-import type { ChannelType } from "@/types";
-import { cn } from "@/lib/utils";
-
-const iconMap: Record<ChannelType, React.ComponentType<{ className?: string }>> = {
-  telegram: MessageSquare,
-  whatsapp: Phone,
-  discord: Hash,
-  slack: Slack,
-  signal: Shield,
-  imessage: Smartphone,
-  webchat: Globe,
-  matrix: Grid3X3,
-  google_chat: MessageSquare,
-  teams: MessageSquare,
-};
-
-const colorMap: Record<ChannelType, string> = {
-  telegram: "text-blue-400",
-  whatsapp: "text-green-400",
-  discord: "text-indigo-400",
-  slack: "text-pink-400",
-  signal: "text-sky-400",
-  imessage: "text-blue-300",
-  webchat: "text-primary",
-  matrix: "text-emerald-400",
-  google_chat: "text-green-500",
-  teams: "text-violet-400",
-};
-
-interface ChannelIconProps {
-  type: ChannelType;
-  className?: string;
-  colored?: boolean;
-}
-
-export function ChannelIcon({ type, className, colored = true }: ChannelIconProps) {
-  const Icon = iconMap[type] ?? Globe;
-  return <Icon className={cn(className, colored && colorMap[type])} />;
-}

package/packages/hive-ui/src/modules/channels/shared/ChannelStats.tsx

@@ -1,37 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card";
-import type { ChannelStats as ChannelStatsType } from "@/types";
-
-interface ChannelStatsProps {
-  stats: ChannelStatsType;
-}
-
-export function ChannelStats({ stats }: ChannelStatsProps) {
-  return (
-    <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-      <Card>
-        <CardContent className="p-3 text-center">
-          <p className="text-lg font-bold">{stats.totalMessages.toLocaleString()}</p>
-          <p className="text-[10px] text-muted-foreground">Total mensajes</p>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardContent className="p-3 text-center">
-          <p className="text-lg font-bold">{stats.messagesLast24h}</p>
-          <p className="text-[10px] text-muted-foreground">Últimas 24h</p>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardContent className="p-3 text-center">
-          <p className="text-lg font-bold">{stats.activeUsers}</p>
-          <p className="text-[10px] text-muted-foreground">Usuarios activos</p>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardContent className="p-3 text-center">
-          <p className="text-lg font-bold">{(stats.errorRate * 100).toFixed(1)}%</p>
-          <p className="text-[10px] text-muted-foreground">Tasa de error</p>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/channels/shared/ChannelTypeBadge.tsx

@@ -1,23 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import type { ChannelType } from "@/types";
-
-const nameMap: Record<ChannelType, string> = {
-  telegram: "Telegram",
-  whatsapp: "WhatsApp",
-  discord: "Discord",
-  slack: "Slack",
-  signal: "Signal",
-  imessage: "iMessage",
-  webchat: "Web Chat",
-  matrix: "Matrix",
-  google_chat: "Google Chat",
-  teams: "Teams",
-};
-
-interface ChannelTypeBadgeProps {
-  type: ChannelType;
-}
-
-export function ChannelTypeBadge({ type }: ChannelTypeBadgeProps) {
-  return <Badge variant="secondary" className="text-xs">{nameMap[type] ?? type}</Badge>;
-}

package/packages/hive-ui/src/modules/channels/shared/ConnectionHealthIndicator.tsx

@@ -1,20 +0,0 @@
-import { cn } from "@/lib/utils";
-
-interface ConnectionHealthIndicatorProps {
-  latencyMs: number;
-  errorRate: number;
-}
-
-export function ConnectionHealthIndicator({ latencyMs, errorRate }: ConnectionHealthIndicatorProps) {
-  const health = errorRate > 0.1 ? "critical" : errorRate > 0.03 ? "degraded" : latencyMs > 3000 ? "degraded" : "healthy";
-  const color = health === "healthy" ? "bg-hive-connected" : health === "degraded" ? "bg-hive-thinking" : "bg-destructive";
-  const label = health === "healthy" ? "Saludable" : health === "degraded" ? "Degradado" : "Crítico";
-
-  return (
-    <div className="flex items-center gap-1.5 text-xs">
-      <span className={cn("inline-block h-2 w-2 rounded-full", color)} />
-      <span className="text-muted-foreground">{label}</span>
-      <span className="text-muted-foreground/60">({latencyMs}ms)</span>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/channels/shared/MessagePreview.tsx

@@ -1,19 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card";
-
-interface MessagePreviewProps {
-  content: string;
-  sender?: string;
-  timestamp?: string;
-}
-
-export function MessagePreview({ content, sender, timestamp }: MessagePreviewProps) {
-  return (
-    <Card className="max-w-sm">
-      <CardContent className="p-3">
-        {sender && <p className="text-xs font-semibold">{sender}</p>}
-        <p className="text-sm">{content}</p>
-        {timestamp && <p className="mt-1 text-[10px] text-muted-foreground text-right">{timestamp}</p>}
-      </CardContent>
-    </Card>
-  );
-}

package/packages/hive-ui/src/modules/channels/shared/index.ts

@@ -1,5 +0,0 @@
-export { ChannelIcon } from "./ChannelIcon";
-export { ChannelTypeBadge } from "./ChannelTypeBadge";
-export { ConnectionHealthIndicator } from "./ConnectionHealthIndicator";
-export { MessagePreview } from "./MessagePreview";
-export { ChannelStats } from "./ChannelStats";