Feat/create chat screen component

p2p-safe-swap/frontend/components/chat/chat-header.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { cn } from "@/lib/utils";
+import { WalletBadge } from "@/frontend/components/ui/wallet-badge";
+import { truncateAddress } from "./utils";
+
+export interface ChatHeaderProps {
+  counterpartAddress: string;
+  isOnline?: boolean;
+  onBack?: () => void;
+  onMore?: () => void;
+  className?: string;
+}
+
+export function ChatHeader({
+  counterpartAddress,
+  isOnline = true,
+  onBack,
+  onMore,
+  className,
+}: ChatHeaderProps) {
+  const [copied, setCopied] = useState(false);
+  const truncated = truncateAddress(counterpartAddress);
+
+  const handleCopy = useCallback(async () => {
+    if (typeof navigator === "undefined" || !navigator.clipboard) return;
+    try {
+      await navigator.clipboard.writeText(counterpartAddress);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setCopied(false);
+    }
+  }, [counterpartAddress]);
+
+  return (
+    <header
+      data-slot="chat-header"
+      className={cn(
+        "flex items-center gap-3 border-b border-border bg-background px-4 py-3",
+        className
+      )}
+    >
+      {onBack ? (
+        <button
+          type="button"
+          onClick={onBack}
+          aria-label="Volver"
+          className={cn(
+            "inline-flex size-9 shrink-0 items-center justify-center rounded-full text-foreground transition-colors",
+            "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          )}
+        >
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+        </button>
+      ) : null}
+
+      <WalletBadge address={counterpartAddress} size="sm" />
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <span
+          className="truncate text-sm font-semibold text-foreground"
+          title={counterpartAddress}
+        >
+          {truncated}
+        </span>
+        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <span
+            className={cn(
+              "inline-block size-1.5 rounded-full",
+              isOnline ? "bg-primary" : "bg-muted-foreground/40"
+            )}
+            aria-hidden="true"
+          />
+          {isOnline ? "Activa ahora" : "Desconectada"}
+        </span>
+      </div>
+
+      <button
+        type="button"
+        onClick={handleCopy}
+        aria-label={copied ? "Dirección copiada" : "Copiar dirección"}
+        aria-live="polite"
+        className={cn(
+          "inline-flex size-9 shrink-0 items-center justify-center rounded-full text-foreground transition-colors",
+          "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          copied && "text-primary"
+        )}
+      >
+        {copied ? (
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        ) : (
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+          </svg>
+        )}
+      </button>
+
+      <button
+        type="button"
+        onClick={onMore}
+        aria-label="Más opciones"
+        className={cn(
+          "inline-flex size-9 shrink-0 items-center justify-center rounded-full text-foreground transition-colors",
+          "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        )}
+      >
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="5" r="1.6" />
+          <circle cx="12" cy="12" r="1.6" />
+          <circle cx="12" cy="19" r="1.6" />
+        </svg>
+      </button>
+    </header>
+  );
+}

p2p-safe-swap/frontend/components/chat/chat-input-bar.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useState, type FormEvent, type KeyboardEvent } from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/frontend/components/ui/Button/Button";
+
+export interface ChatInputBarProps {
+  onSendMessage: (text: string) => void;
+  onSendPayment: () => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function ChatInputBar({
+  onSendMessage,
+  onSendPayment,
+  placeholder = "Escribe un mensaje…",
+  disabled = false,
+  className,
+}: ChatInputBarProps) {
+  const [text, setText] = useState("");
+
+  const submit = () => {
+    const trimmed = text.trim();
+    if (!trimmed || disabled) return;
+    onSendMessage(trimmed);
+    setText("");
+  };
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    submit();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      submit();
+    }
+  };
+
+  const canSend = text.trim().length > 0 && !disabled;
+
+  return (
+    <form
+      data-slot="chat-input-bar"
+      onSubmit={handleSubmit}
+      className={cn(
+        "flex items-end gap-2 border-t border-border bg-background px-3 py-2.5",
+        className
+      )}
+      aria-label="Enviar mensaje o pago"
+    >
+      <Button
+        variant="primary"
+        size="md"
+        label="Pagar"
+        onClick={onSendPayment}
+        disabled={disabled}
+        aria-label="Enviar pago"
+      />
+
+      <label className="sr-only" htmlFor="chat-input">
+        Mensaje
+      </label>
+      <textarea
+        id="chat-input"
+        value={text}
+        onChange={(event) => setText(event.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={1}
+        className={cn(
+          "min-h-10 max-h-32 flex-1 resize-none rounded-2xl border border-border bg-muted/50 px-4 py-2 text-sm text-foreground placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        )}
+      />
+
+      <Button
+        type="submit"
+        variant="primary"
+        size="md"
+        label="Enviar"
+        disabled={!canSend}
+        aria-label="Enviar mensaje"
+      />
+    </form>
+  );
+}