kcg-code 0.0.0-stage → 0.2.0

package/src/components/sessions/SessionView.tsx

@@ -0,0 +1,240 @@
+/**
+ * Tampilan Session — versi headless (opencode serve).
+ *
+ * Berbeda dari versi PTY/TUI (yang me-render chunk byte terminal TUI):
+ * - Pesan datang sebagai `SessionMessage` terstruktur (`role` + `parts`):
+ *   text, reasoning (collapsible per part, urut sesuai alur), tool/step.
+ * - Interactive_Prompt (permission/question) dirender via `PromptCard.tsx`.
+ * - Saat model merespon (`turn_active` true / pesan streaming) tombol kirim
+ *   berubah jadi tombol Stop (kirim `{ type: "interrupt" }`) — menghentikan
+ *   balasan saja ala opencode, Session tetap berjalan. `{ type: "stop" }`
+ *   (menonaktifkan Session) tetap ada lewat daftar Session / HTTP.
+ *
+ * File ini sekarang HANYA menyusun area layar dari bagian-bagian yang
+ * sudah dipisah:
+ * - State & alur WS: `hooks/useSessionChat.ts`.
+ * - Logika transformasi pesan murni: `lib/turns.ts` (type di `types/turns.ts`).
+ * - Area UI: `SessionHeader`, `SessionTimeline`, `PromptPanel`,
+ *   `SessionComposer` di folder yang sama.
+ * - Drag & drop file: `FileDropOverlay` (portal, menutupi seluruh viewport)
+ *   meneruskan file ke composer (`SessionComposerHandle.addFiles`).
+ * - Kartu konteks kanan (`ContextPanel`): Environment / Task list / MCP /
+ *   Reference. Desktop: kolom sendiri di kanan (berdampingan) — kolom chat
+ *   menyempit & percakapan tetap terpusat di sisa ruang, tidak tertutup
+ *   kartu. Di bawah `lg` (HP & tablet) tampil sebagai bottom sheet.
+ */
+import { useMemo, useRef, useState } from "react";
+import { ConfirmSessionDeleteDialog } from "@/components/sessions/ConfirmSessionDeleteDialog";
+import {
+  ContextPanel,
+  ContextPanelTrigger,
+  ContextSheet,
+} from "@/components/sessions/ContextPanel";
+import { FileDropOverlay } from "@/components/sessions/FileDropOverlay";
+import { SessionComposer, type SessionComposerHandle } from "@/components/sessions/SessionComposer";
+import { SessionHeader } from "@/components/sessions/SessionHeader";
+import { SessionTimeline } from "@/components/sessions/SessionTimeline";
+import {
+  SessionComposerSkeleton,
+  SessionTimelineSkeleton,
+} from "@/components/sessions/SessionTimelineSkeleton";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { useSessionChat } from "@/hooks/useSessionChat";
+import { useSessionContext } from "@/hooks/useSessionContext";
+import { CONVERSATION_MAX_W } from "@/lib/layout";
+import { collectReferences } from "@/lib/references";
+import { cn } from "@/lib/utils";
+import type { Session } from "@/types";
+import { PromptPanel } from "./PromptPanel";
+
+/** Lebar minimum untuk kartu konteks sebagai kolom samping (`lg`). */
+const SIDE_PANEL_QUERY = "(min-width: 1024px)";
+
+export interface SessionViewProps {
+  session: Session;
+  onBack: () => void;
+  /**
+   * Dipanggil setelah Session dihapus dari menu aksi header. Bila tidak
+   * diberikan, `onBack` dipakai — halaman ini tidak punya data lagi untuk
+   * ditampilkan setelah Session hilang.
+   */
+  onDeleted?: () => void;
+}
+
+export function SessionView({ session, onBack, onDeleted }: SessionViewProps) {
+  const chat = useSessionChat({ session, onBack, onDeleted });
+  /**
+   * Riwayat belum tiba dari WebSocket. `messages` kosong di fase ini BUKAN
+   * percakapan kosong — tampilkan kerangka, jangan empty-state. Pengecualian:
+   * pesan optimistis (prompt pertama dari homepage) sudah ada sejak frame
+   * pertama, jadi langsung tampil sebagai percakapan.
+   */
+  const loadingHistory = !chat.historyLoaded && chat.messages.length === 0;
+  const empty = !loadingHistory && chat.messages.length === 0;
+  const composerRef = useRef<SessionComposerHandle>(null);
+  /** Panel konteks kanan; default tertutup agar area chat tetap lega. */
+  const [contextOpen, setContextOpen] = useState(false);
+  // Kolom konteks berdampingan butuh ruang: di bawah `lg` kolom chat jadi
+  // terlalu sempit, jadi kartu tampil sebagai bottom sheet (seperti HP).
+  const sidePanel = useMediaQuery(SIDE_PANEL_QUERY);
+  const sessionCtx = useSessionContext(session.id, contextOpen, chat.generating);
+  /**
+   * Reference diturunkan dari parts pesan yang sudah ada di timeline
+   * (tanpa request tambahan). `session.cwd` dipakai untuk mengubah path
+   * absolut dari tool call menjadi path relatif project.
+   */
+  const references = useMemo(
+    () => (contextOpen ? collectReferences(chat.messages, session.cwd) : []),
+    [contextOpen, chat.messages, session.cwd],
+  );
+  // Composer tidak dirender saat pertanyaan menunggu jawaban (panel docked)
+  // maupun saat riwayat masih dimuat (belum tahu tata letak akhirnya).
+  const composerShown = !loadingHistory && (empty || !chat.hasPendingQuestion);
+  const acceptingFiles = composerShown && chat.canInput;
+  const blockedReason = loadingHistory
+    ? "Wait for the conversation to load, then drop your files."
+    : !composerShown
+      ? "Answer the question first, then add your files."
+      : chat.busy
+        ? "Wait for the response to finish, then drop your files."
+        : "Start the session to add files.";
+
+  return (
+    // `data-vt-name`: tujuan transisi "to-session" — composer homepage meluas
+    // menjadi seluruh area ini (lihat styles/globals.css).
+    <div data-vt-name="session-surface" className="flex h-full min-h-0 flex-col">
+      <SessionHeader
+        session={session}
+        status={chat.status}
+        wsStatus={chat.wsStatus}
+        onStop={() => void chat.stop()}
+        onStart={() => void chat.start()}
+        onRequestDelete={chat.beginDelete}
+        stopping={chat.stopping}
+        starting={chat.starting}
+      />
+
+      {/* Percakapan + kartu konteks berdampingan. `relative` jadi acuan tombol
+          hamburger (kanan bawah header) dan kartu saat mengapung di layar
+          sempit. */}
+      <div className="relative flex min-h-0 flex-1">
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+          {loadingHistory ? (
+            // Kerangka sama persis dengan fase `SessionPage` -> tanpa kedipan.
+            <>
+              <SessionTimelineSkeleton />
+              <SessionComposerSkeleton />
+            </>
+          ) : empty ? (
+            /* Empty-state ala Gemini: sapaan + composer dipusatkan vertikal.
+            Timeline & prompt panel belum dirender (tidak ada isinya); spacer
+            flex-1 di atas & bawah menjaga blok ini tepat di tengah kolom di
+            bawah header. Begitu pesan pertama masuk (echo WS), layout pindah
+            ke varian percakapan di bawah — composer turun ke dasar. */
+            <div className="flex min-h-0 flex-1 flex-col px-3 sm:px-4">
+              <div className="min-h-0 flex-[2]" />
+              <div className={cn("mx-auto w-full", CONVERSATION_MAX_W)}>
+                <h1 className="mb-6 text-center text-2xl font-medium tracking-tight sm:text-3xl">
+                  No conversation yet
+                </h1>
+                <SessionComposer
+                  ref={composerRef}
+                  session={session}
+                  inputAllowed={chat.canInput}
+                  busy={chat.busy}
+                  generating={chat.generating}
+                  wsStatus={chat.wsStatus}
+                  send={chat.send}
+                  reportError={chat.reportError}
+                  onInterrupt={chat.interrupt}
+                />
+              </div>
+              <div className="min-h-0 flex-[3]" />
+            </div>
+          ) : (
+            <>
+              <SessionTimeline
+                error={chat.error}
+                status={chat.status}
+                messages={chat.messages}
+                collapsible={chat.collapsible}
+                onToggle={chat.toggleBlock}
+                generating={chat.generating}
+              />
+
+              {/* Question pending: panel DOCKED menggantikan composer — jawaban
+              pertanyaan adalah satu-satunya input saat ini (ala TUI opencode).
+              Hanya area jawaban kartu yang scroll; footer aksi tetap terlihat.
+              Permission (bukan question): panel tetap mengambang DI ATAS
+              composer seperti biasa. */}
+              <PromptPanel
+                groups={chat.promptGroups}
+                errorSignal={chat.promptError}
+                onResolve={chat.resolvePrompt}
+                onConsumeError={chat.consumePromptError}
+                docked={chat.hasPendingQuestion}
+              />
+
+              {!chat.hasPendingQuestion && (
+                <SessionComposer
+                  ref={composerRef}
+                  session={session}
+                  inputAllowed={chat.canInput}
+                  busy={chat.busy}
+                  generating={chat.generating}
+                  wsStatus={chat.wsStatus}
+                  send={chat.send}
+                  reportError={chat.reportError}
+                  onInterrupt={chat.interrupt}
+                />
+              )}
+            </>
+          )}
+        </div>
+
+        {/* Tertutup: hanya tombol hamburger. Terbuka (desktop): tombol hilang
+            & kartu jadi kolom kanan selebar 17rem yang IKUT tata letak — kolom
+            chat (flex-1) menyempit, jadi pesan & composer tidak tertutup. */}
+        {!sidePanel ? (
+          // HP & tablet: bottom sheet. Tombol hamburger tetap terlihat — sheet
+          // menutupi layar & punya penutupnya sendiri (tap luar / geser / Esc).
+          <>
+            <ContextPanelTrigger onOpen={() => setContextOpen(true)} />
+            <ContextSheet
+              open={contextOpen}
+              onOpenChange={setContextOpen}
+              context={sessionCtx.context}
+              references={references}
+              loading={sessionCtx.loading}
+            />
+          </>
+        ) : contextOpen ? (
+          <div className="flex w-[17rem] shrink-0 flex-col pt-2 pe-3 pb-3 sm:pe-4">
+            <ContextPanel
+              context={sessionCtx.context}
+              references={references}
+              loading={sessionCtx.loading}
+              onClose={() => setContextOpen(false)}
+            />
+          </div>
+        ) : (
+          <ContextPanelTrigger onOpen={() => setContextOpen(true)} />
+        )}
+      </div>
+
+      <FileDropOverlay
+        accepting={acceptingFiles}
+        blockedReason={blockedReason}
+        onDropFiles={(files, from) => composerRef.current?.addFiles(files, from)}
+      />
+
+      {/* Konfirmasi hapus Session dari menu aksi header */}
+      <ConfirmSessionDeleteDialog
+        open={chat.deleteOpen}
+        onOpenChange={(open) => (open ? chat.beginDelete() : chat.cancelDelete())}
+        deleting={chat.deleting}
+        onConfirm={() => void chat.confirmDelete()}
+      />
+    </div>
+  );
+}

package/src/components/sessions/ThoughtProcessBlock.tsx

@@ -0,0 +1,199 @@
+/**
+ * Satu blok "Thought process" collapsible di dalam turn assistant.
+ *
+ * Berisi kluster steps berurutan (reasoning/tool) dengan garis penghubung
+ * antar langkah + tanda "Done" setelah blok selesai di-stream. Status toggle
+ * dikelola pemilik daftar (key `groupId:blockKey`) agar blok baru saat
+ * streaming otomatis masuk keadaan collapsed tanpa menyentuh toggle user.
+ */
+import {
+  ChevronRightIcon,
+  CircleCheckBigIcon,
+  ClockFadingIcon,
+  FileIcon,
+  FolderIcon,
+  GlobeIcon,
+  type LucideIcon,
+  PenLineIcon,
+  SearchIcon,
+  TerminalIcon,
+  WrenchIcon,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import { useSmoothText } from "@/hooks/useSmoothText";
+import { type CollapsibleState, isCollapsibleExpanded } from "@/lib/collapsible";
+import { partText, toolLabel } from "@/lib/turns";
+import { cn } from "@/lib/utils";
+import type { MessagePart, TurnSegment } from "@/types";
+
+/** Step dalam blok: reasoning atau tool call. */
+export type ThoughtStep = Extract<TurnSegment, { kind: "reasoning" | "tool" }>;
+
+export interface ThoughtProcessBlockProps {
+  /** Id grup turn (untuk key collapsible `groupId:blockKey`). */
+  groupId: string;
+  /** Key blok (dari key segmen pertama). */
+  blockKey: string;
+  steps: ThoughtStep[];
+  collapsible: CollapsibleState;
+  onToggle: (key: string) => void;
+  /** Turn masih streaming — blok terakhir menampilkan indikator aktif. */
+  streaming: boolean;
+  /** Apakah ini blok terakhir dalam turn (menentukan indikator streaming). */
+  isLastBlock: boolean;
+}
+
+/**
+ * Ikon badge tool mengikuti nama tool (fallback: kunci inggris).
+ */
+const TOOL_ICONS: Record<string, LucideIcon> = {
+  read: FileIcon,
+  list: FolderIcon,
+  glob: FolderIcon,
+  edit: PenLineIcon,
+  write: PenLineIcon,
+  patch: PenLineIcon,
+  bash: TerminalIcon,
+  shell: TerminalIcon,
+  grep: SearchIcon,
+  webfetch: GlobeIcon,
+};
+
+function toolIcon(part: MessagePart): LucideIcon {
+  const name = (typeof part.tool === "string" ? part.tool : part.type).toLowerCase();
+  return (name !== "" && TOOL_ICONS[name]) || WrenchIcon;
+}
+
+/** Ikon kecil (14px) untuk langkah timeline & indikator status. */
+function stepIcon(Icon: LucideIcon, className?: string) {
+  return <Icon className={cn("size-3.5 shrink-0", className)} data-icon="inline-start" />;
+}
+
+/**
+ * Baris ringkas isi reasoning di timeline. Saat masih di-stream (teks belum
+ * lengkap) tampil redup; setelah selesai tampil apa adanya — keduanya bisa
+ * panjang, jadi tinggi dibatasi + scroll internal.
+ */
+function ReasoningStep({ text, live = false }: { text: string; live?: boolean }) {
+  // Reasoning yang masih di-stream ikut dihaluskan (sama seperti jawaban).
+  const shown = useSmoothText(text, live);
+  const dim = shown.trim() === "";
+  return (
+    <div
+      className={cn(
+        "max-h-40 overflow-y-auto whitespace-pre-wrap text-[13px] leading-relaxed",
+        dim && "text-muted-foreground/50",
+      )}
+    >
+      {dim ? "organizing thoughts…" : shown}
+    </div>
+  );
+}
+
+/**
+ * Satu langkah timeline di dalam blok "Thought process": ikon status di
+ * kiri (dengan garis penghubung antar langkah) + isi di kanan.
+ *
+ * Garis digambar ABSOLUT (bukan flex-1 di kolom stretch): `align-self:
+ * stretch` hanya membentang sampai content box sehingga di langkah
+ * satu-baris sisa ruang garisnya ~0px (tak terlihat). Absolut terhadap
+ * PADDING box -> `bottom-0` menyentuh dasar `pb-5`, artinya garis selalu
+ * tersambung ke langkah berikutnya berapa pun tinggi kontennya.
+ */
+function renderTimelineStep(
+  icon: ReactNode,
+  content: ReactNode,
+  opts?: { last?: boolean; streaming?: boolean },
+) {
+  return (
+    <div className={cn("relative flex gap-2.5", !opts?.last && "pb-5")}>
+      {/* Garis penghubung: mulai tepat di bawah ikon (mt-0.5 + size-5 =
+          22px) sampai dasar row; x=10px = pusat kolom ikon (size-5). */}
+      {!opts?.last && (
+        <span className="absolute top-6 bottom-0 left-2.5 -ml-px w-px bg-border" aria-hidden />
+      )}
+      <span
+        className={cn(
+          "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full",
+          opts?.streaming && "animate-pulse text-foreground/70",
+        )}
+      >
+        {icon}
+      </span>
+      <div className="min-w-0 flex-1 text-sm text-muted-foreground">{content}</div>
+    </div>
+  );
+}
+
+export function ThoughtProcessBlock({
+  groupId,
+  blockKey,
+  steps,
+  collapsible,
+  onToggle,
+  streaming,
+  isLastBlock,
+}: ThoughtProcessBlockProps) {
+  if (steps.length === 0) return null;
+  const collapsibleKey = `${groupId}:${blockKey}`;
+  const expanded = isCollapsibleExpanded(collapsible, collapsibleKey);
+  // Blok terakhir yang masih streaming: "Done" belum tampil.
+  const blockStreaming = streaming && isLastBlock;
+
+  return (
+    <Collapsible open={expanded}>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className="h-7 self-start gap-1 px-2 text-xs text-muted-foreground"
+        onClick={() => onToggle(collapsibleKey)}
+        aria-expanded={expanded}
+      >
+        Thought process
+        {/* Ikon sengaja di KANAN label */}
+        <ChevronRightIcon
+          data-icon="inline-end"
+          className={cn("transition-transform", expanded && "rotate-90")}
+        />
+      </Button>
+      <CollapsibleContent>
+        <div className="flex flex-col px-3 pt-1">
+          {steps.map((seg, i) =>
+            seg.kind === "reasoning" ? (
+              <div key={seg.key}>
+                {renderTimelineStep(
+                  stepIcon(ClockFadingIcon, "text-muted-foreground"),
+                  <ReasoningStep
+                    text={partText(seg.part) ?? ""}
+                    live={blockStreaming && i === steps.length - 1}
+                  />,
+                  {
+                    last: blockStreaming && i === steps.length - 1,
+                    streaming: blockStreaming && i === steps.length - 1,
+                  },
+                )}
+              </div>
+            ) : (
+              <div key={seg.key}>
+                {renderTimelineStep(
+                  stepIcon(toolIcon(seg.part), "text-muted-foreground"),
+                  <span className="font-mono text-[13px]">{toolLabel(seg.part)}</span>,
+                  { last: blockStreaming && i === steps.length - 1, streaming: false },
+                )}
+              </div>
+            ),
+          )}
+          {!blockStreaming &&
+            renderTimelineStep(
+              stepIcon(CircleCheckBigIcon, "text-muted-foreground"),
+              <span>Done</span>,
+              { last: true },
+            )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/components/sessions/UserMessage.tsx

@@ -0,0 +1,177 @@
+/**
+ * Render satu pesan user: teks + lampiran gambar (thumbnail) + @file.
+ *
+ * Part `file` gambar (punya `attachmentId` + mime image) dimuat bytes-nya
+ * lewat route HTTP `/api/uploads/...` (`attachmentUrl`); file upload lain
+ * tampil sebagai kartu yang bisa diunduh; part `file` tanpa `attachmentId`
+ * (echo @file) tampil sebagai chip nama file.
+ */
+import { FileIcon } from "lucide-react";
+import { useState } from "react";
+import { FileTile } from "@/components/sessions/AttachmentTile";
+import { ImageLightbox } from "@/components/sessions/ImageLightbox";
+import { CopyMessageButton } from "@/components/sessions/MessageActions";
+import { Bubble, BubbleContent } from "@/components/ui/bubble";
+import { Message, MessageContent, MessageFooter } from "@/components/ui/message";
+import { attachmentUrl } from "@/lib/api";
+import { isPreviewableImage } from "@/lib/attachments";
+import { splitComposerMentions } from "@/lib/composer";
+import { formatTime } from "@/lib/time";
+import { textOf } from "@/lib/turns";
+import { cn } from "@/lib/utils";
+import type { MessagePart, SessionMessage } from "@/types";
+
+export interface UserMessageProps {
+  message: SessionMessage;
+}
+
+/** Part `file` yang merupakan gambar lampiran (punya attachmentId + mime image). */
+function isImageAttachment(
+  p: MessagePart,
+): p is MessagePart & { mime: string; attachmentId: string } {
+  return (
+    p.type === "file" &&
+    typeof p.mime === "string" &&
+    isPreviewableImage(p.mime) &&
+    typeof p.attachmentId === "string"
+  );
+}
+
+/** File upload non-gambar (dokumen, kode, arsip, …). */
+function isFileAttachment(
+  p: MessagePart,
+): p is MessagePart & { attachmentId: string; filename: string } {
+  return (
+    p.type === "file" &&
+    typeof p.attachmentId === "string" &&
+    typeof p.filename === "string" &&
+    !isImageAttachment(p)
+  );
+}
+
+export function UserMessage({ message: m }: UserMessageProps) {
+  const [preview, setPreview] = useState<number | null>(null);
+  const images = m.parts.filter(isImageAttachment);
+  const text = textOf(m.parts);
+  const lightboxImages = images.map((p) => ({
+    src: attachmentUrl(m.sessionId, p.attachmentId),
+    alt: p.filename ?? "Attached image",
+  }));
+  const uploadedFiles = m.parts.filter(isFileAttachment);
+  /** Echo @file: part `file` tanpa `attachmentId` (path relatif project). */
+  const isMention = (p: MessagePart) =>
+    p.type === "file" && typeof p.attachmentId !== "string" && typeof p.filename === "string";
+  const mentionedPaths = new Set(m.parts.filter(isMention).map((p) => p.filename as string));
+  const attachedFiles = m.parts
+    .filter(isMention)
+    .map((p) => ({ part: p, filename: p.filename as string }));
+  return (
+    <Message align="end">
+      <MessageContent>
+        {/* Gambar di atas bubble teks (rata kanan), ala aplikasi chat:
+            1 gambar = satu kartu besar; 2+ = grid 2 kolom kotak. Klik =
+            pratinjau layar penuh. */}
+        {images.length > 0 && (
+          <ul
+            aria-label={`${images.length} attached ${images.length === 1 ? "image" : "images"}`}
+            className={cn(
+              "grid gap-1.5 self-end",
+              images.length === 1 ? "w-full max-w-72 grid-cols-1" : "w-full max-w-80 grid-cols-2",
+            )}
+          >
+            {lightboxImages.map((img, i) => (
+              <li key={img.src} className={cn(images.length === 3 && i === 0 && "col-span-2")}>
+                <button
+                  type="button"
+                  onClick={() => setPreview(i)}
+                  aria-label={`Preview ${img.alt}`}
+                  className="group/img block w-full overflow-hidden rounded-xl border bg-muted outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                >
+                  <img
+                    src={img.src}
+                    alt={img.alt}
+                    loading="lazy"
+                    draggable={false}
+                    className={cn(
+                      "w-full object-cover transition-transform duration-200 group-hover/img:scale-[1.02]",
+                      images.length === 1 ? "max-h-80" : "aspect-square",
+                      images.length === 3 && i === 0 && "aspect-[2/1]",
+                    )}
+                  />
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {/* File non-gambar: kartu unduhan di atas bubble (rata kanan). */}
+        {uploadedFiles.length > 0 && (
+          <ul
+            aria-label={`${uploadedFiles.length} attached ${uploadedFiles.length === 1 ? "file" : "files"}`}
+            className="flex max-w-full flex-wrap justify-end gap-1.5 self-end"
+          >
+            {uploadedFiles.map((p) => (
+              <li key={p.attachmentId} className="min-w-0">
+                <a
+                  href={attachmentUrl(m.sessionId, p.attachmentId)}
+                  download={p.filename}
+                  title={`Download ${p.filename}`}
+                  className="block rounded-lg outline-none transition-opacity hover:opacity-90 focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                >
+                  <FileTile
+                    filename={p.filename}
+                    mime={p.mime ?? ""}
+                    className="h-14 w-56 max-w-full"
+                  />
+                </a>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {(text !== "" || attachedFiles.length > 0) && (
+          <Bubble>
+            {text !== "" && (
+              <BubbleContent className="whitespace-pre-wrap">
+                {/* Mention @file disorot sama seperti di composer. */}
+                {splitComposerMentions(text, mentionedPaths).map((seg, i) =>
+                  seg.kind === "mention" ? (
+                    <mark
+                      // biome-ignore lint/suspicious/noArrayIndexKey: urutan potongan = urutan teks
+                      key={i}
+                      className="rounded-[3px] bg-current/10 text-inherit"
+                    >
+                      {seg.text}
+                    </mark>
+                  ) : (
+                    // biome-ignore lint/suspicious/noArrayIndexKey: urutan potongan = urutan teks
+                    <span key={i}>{seg.text}</span>
+                  ),
+                )}
+              </BubbleContent>
+            )}
+            {attachedFiles.length > 0 && (
+              <div className="mt-1.5 flex flex-wrap gap-1">
+                {attachedFiles.map(({ filename }) => (
+                  <span
+                    key={filename}
+                    className="inline-flex max-w-full items-center gap-1 rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground"
+                  >
+                    <FileIcon className="size-3 shrink-0" />
+                    <span className="truncate">{filename}</span>
+                  </span>
+                ))}
+              </div>
+            )}
+          </Bubble>
+        )}
+        {/* Copy di kiri waktu (pesan user rata kanan). */}
+        <MessageFooter className="gap-1">
+          <CopyMessageButton text={text} />
+          <span className="text-muted-foreground/80">{formatTime(m.createdAt)}</span>
+        </MessageFooter>
+        <ImageLightbox images={lightboxImages} index={preview} onIndexChange={setPreview} />
+      </MessageContent>
+    </Message>
+  );
+}