spb/note-spboucher-ai

1"use client";2import { X, PanelRightClose } from "lucide-react";3import { useUI } from "@/lib/client/store";4import { Chat } from "@/components/chat/Chat";5import { useEffect, useRef } from "react";6export function AIPanel({ pathname }: { pathname: string }) {7  const ui = useUI(); const pageId = pathname.startsWith("/p/") ? pathname.slice(3).split(/[/?#]/)[0] : null;8  const drag = useRef<{ x: number; w: number } | null>(null);9  useEffect(() => { const mv = (e: MouseEvent) => { if (!drag.current) return; ui.set({ aiWidth: Math.min(720, Math.max(320, drag.current.w + (drag.current.x - e.clientX))) }); }; const up = () => (drag.current = null); window.addEventListener("mousemove", mv); window.addEventListener("mouseup", up); return () => { window.removeEventListener("mousemove", mv); window.removeEventListener("mouseup", up); }; }, [ui]);10  return (11    <>12      <aside className="hidden md:flex relative shrink-0 flex-col border-l border-line bg-bg-elev" style={{ width: ui.aiWidth }}>13        <div className="absolute inset-y-0 -left-1 w-2 cursor-col-resize" onMouseDown={(e) => (drag.current = { x: e.clientX, w: ui.aiWidth })} />14        <div className="flex h-11 items-center gap-2 border-b border-line px-3 text-[13px] font-medium"><span>AI assistant</span>{pageId && <span className="rounded bg-accent-soft px-1.5 py-0.5 text-[10px] text-accent">page context</span>}<button onClick={ui.toggleAI} className="ml-auto grid size-7 place-items-center rounded-md text-fg-muted hover:bg-bg-sunk"><PanelRightClose className="size-4" /></button></div>15        <div className="min-h-0 flex-1"><Chat key={pageId ?? "global"} pageId={pageId} prefill={ui.aiContext.prefill} onInsert={(md) => window.dispatchEvent(new CustomEvent("note:insert-markdown", { detail: md }))} /></div>16      </aside>17      <div className="fixed inset-0 z-40 flex flex-col bg-bg md:hidden safe-top">18        <div className="flex h-12 items-center gap-2 border-b border-line px-3 text-[14px] font-medium"><span>AI assistant</span><button onClick={ui.toggleAI} className="ml-auto grid size-8 place-items-center rounded-md text-fg-muted"><X className="size-5" /></button></div>19        <div className="min-h-0 flex-1"><Chat key={pageId ?? "global-m"} pageId={pageId} prefill={ui.aiContext.prefill} /></div>20      </div>21    </>22  );23}24