@hogoshi/ui 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hogoshi/ui",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/chat.tsx

@@ -0,0 +1,446 @@
+"use client";
+
+import {
+  Alert01Icon,
+  ArrowDown01Icon,
+  ArrowUp02Icon,
+  Cancel01Icon,
+  Pin02Icon,
+  StopCircleIcon,
+  Tick02Icon,
+} from "@hugeicons-pro/core-stroke-rounded";
+import { Pin02Icon as Pin02SolidIcon } from "@hugeicons-pro/core-solid-rounded";
+import {
+  useEffect,
+  useRef,
+  type ComponentProps,
+  type ReactNode,
+} from "react";
+import { cn } from "../lib/cn";
+import type { AppIcon } from "./icon";
+import { Icon } from "./icon";
+import { Image, ImageGallery, type ViewerImage } from "./image-viewer";
+import { Button } from "./button";
+import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "./collapsible";
+import { Spinner } from "./spinner";
+import { Badge } from "./badge";
+
+const workingText =
+  "animate-[shimmer_1.8s_linear_infinite] bg-[linear-gradient(90deg,var(--fg-muted)_20%,var(--fg)_50%,var(--fg-muted)_80%)] bg-[length:200%_100%] bg-clip-text text-transparent";
+
+function ChatCaret() {
+  return (
+    <span
+      aria-hidden
+      className="bg-fg animate-[chat-caret_1.1s_var(--motion-ease)_infinite] ml-0.5 inline-block h-[1em] w-[2px] translate-y-[2px] rounded-full"
+    />
+  );
+}
+
+export function ChatMessage({
+  role,
+  streaming = false,
+  className,
+  children,
+}: {
+  role: "user" | "assistant";
+  streaming?: boolean;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className={cn("group/chat flex w-full flex-col", role === "user" && "items-end", className)}>
+      {role === "user" ? (
+        <div className="hogoshi-selectable bg-bg-subtle max-w-[85%] rounded-[var(--radius-md)] px-3.5 py-2.5 text-sm leading-relaxed">
+          {children}
+          {streaming ? <ChatCaret /> : null}
+        </div>
+      ) : (
+        <div className="hogoshi-selectable text-fg w-full min-w-0 text-sm leading-relaxed">
+          {children}
+          {streaming ? <ChatCaret /> : null}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ChatActions({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-0.5 opacity-0 transition-opacity duration-[var(--motion-duration)] ease-[var(--motion-ease)] focus-within:opacity-100 group-hover/chat:opacity-100",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ChatThinking({
+  status,
+  state = "working",
+  reasoning,
+  defaultOpen = false,
+  className,
+}: {
+  status: ReactNode;
+  state?: "working" | "attention";
+  reasoning?: ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+}) {
+  const attention = state === "attention";
+  const label = (
+    <span className={cn("text-xs font-medium", attention ? "text-warning" : workingText)}>{status}</span>
+  );
+
+  if (!reasoning) {
+    return (
+      <div className={cn("flex items-center gap-2", className)}>
+        {attention ? (
+          <Icon
+            icon={Alert01Icon}
+            variant="stroke"
+            size={14}
+            className="text-warning animate-[loader-pulse_calc(var(--motion-duration)*2)_var(--motion-ease)_infinite]"
+          />
+        ) : null}
+        {label}
+      </div>
+    );
+  }
+
+  return (
+    <Collapsible defaultOpen={defaultOpen} className={className}>
+      <CollapsibleTrigger className="group/thinking py-0.5">
+        <Icon
+          icon={ArrowDown01Icon}
+          variant="stroke"
+          size={12}
+          className="text-fg-subtle transition-transform duration-[var(--motion-duration)] ease-[var(--motion-ease)] group-data-[panel-open]/thinking:rotate-180"
+        />
+        {label}
+      </CollapsibleTrigger>
+      <CollapsiblePanel className="hogoshi-selectable text-fg-muted py-1 pl-5 text-xs leading-relaxed">
+        {reasoning}
+      </CollapsiblePanel>
+    </Collapsible>
+  );
+}
+
+export type ChatToolStatus = "running" | "success" | "error" | "attention";
+
+function ToolStatusIcon({ status }: { status: ChatToolStatus }) {
+  if (status === "running") return <Spinner size="sm" className="text-fg-muted shrink-0" />;
+  if (status === "success")
+    return <Icon icon={Tick02Icon} variant="stroke" size={16} className="text-success shrink-0" />;
+  if (status === "error")
+    return <Icon icon={Cancel01Icon} variant="stroke" size={16} className="text-danger shrink-0" />;
+  return (
+    <Icon
+      icon={Alert01Icon}
+      variant="stroke"
+      size={16}
+      className="text-warning animate-[loader-pulse_calc(var(--motion-duration)*2)_var(--motion-ease)_infinite] shrink-0"
+    />
+  );
+}
+
+export function ChatToolCall({
+  status,
+  label,
+  meta,
+  defaultOpen = false,
+  className,
+  children,
+}: {
+  status: ChatToolStatus;
+  label: ReactNode;
+  meta?: ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+  children?: ReactNode;
+}) {
+  if (!children) {
+    return (
+      <div className={cn("flex min-w-0 items-center gap-2", className)}>
+        <ToolStatusIcon status={status} />
+        <span className="text-fg truncate text-sm">{label}</span>
+        {meta ? <span className="text-fg-subtle min-w-0 truncate text-xs">{meta}</span> : null}
+      </div>
+    );
+  }
+
+  return (
+    <Collapsible defaultOpen={defaultOpen} className={className}>
+      <CollapsibleTrigger className="group/tool gap-2 py-0.5">
+        <ToolStatusIcon status={status} />
+        <span className="text-fg truncate text-sm">{label}</span>
+        {meta ? <span className="text-fg-subtle min-w-0 truncate text-xs">{meta}</span> : null}
+        <Icon
+          icon={ArrowDown01Icon}
+          variant="stroke"
+          size={12}
+          className="text-fg-subtle ml-auto shrink-0 transition-transform duration-[var(--motion-duration)] ease-[var(--motion-ease)] group-data-[panel-open]/tool:rotate-180"
+        />
+      </CollapsibleTrigger>
+      <CollapsiblePanel className="hogoshi-selectable my-1 ml-[7px] border-border border-l py-1 pr-1 pl-3.5">
+        {children}
+      </CollapsiblePanel>
+    </Collapsible>
+  );
+}
+
+type DiffKind = "file" | "hunk" | "add" | "del" | "ctx";
+
+const diffLineClass: Record<DiffKind, string> = {
+  file: "text-fg-subtle",
+  hunk: "text-accent bg-accent-muted/40",
+  add: "text-success bg-success/10",
+  del: "text-danger bg-danger/10",
+  ctx: "text-fg-muted",
+};
+
+function diffKind(line: string): DiffKind {
+  if (line.startsWith("diff --git") || line.startsWith("+++") || line.startsWith("---")) return "file";
+  if (line.startsWith("@@")) return "hunk";
+  if (line.startsWith("+")) return "add";
+  if (line.startsWith("-")) return "del";
+  return "ctx";
+}
+
+export function ChatDiff({ diff, className, ...props }: { diff: string } & ComponentProps<"div">) {
+  const lines = diff.replace(/\n$/, "").split("\n");
+  return (
+    <div
+      className={cn(
+        "border-border bg-bg-subtle max-h-72 overflow-auto rounded-[var(--radius-md)] border font-mono text-xs",
+        className,
+      )}
+      {...props}
+    >
+      {lines.map((line, index) => (
+        <div key={index} className={cn("px-3 py-px whitespace-pre", diffLineClass[diffKind(line)])}>
+          {line || " "}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ChatComposer({
+  value,
+  onValueChange,
+  onSubmit,
+  onStop,
+  onKeyDown,
+  busy = false,
+  placeholder,
+  disabled,
+  actions,
+  className,
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+  onSubmit?: () => void;
+  onStop?: () => void;
+  onKeyDown?: ComponentProps<"textarea">["onKeyDown"];
+  busy?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  actions?: ReactNode;
+  className?: string;
+}) {
+  const textarea = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const el = textarea.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 192)}px`;
+  }, [value]);
+
+  return (
+    <div
+      className={cn(
+        "border-border bg-bg-elevated focus-within:ring-ring focus-within:border-accent rounded-[var(--radius-lg)] border transition-[border-color,box-shadow] duration-[var(--motion-duration)] ease-[var(--motion-ease)] focus-within:ring-2",
+        className,
+      )}
+    >
+      <textarea
+        ref={textarea}
+        rows={1}
+        value={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        onChange={(event) => onValueChange(event.target.value)}
+        onKeyDown={(event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented) return;
+          if (event.key === "Enter" && !event.shiftKey && !busy && !disabled) {
+            event.preventDefault();
+            onSubmit?.();
+          }
+        }}
+        className="placeholder:text-fg-subtle max-h-48 w-full resize-none bg-transparent px-3.5 pt-3 pb-2 text-sm leading-relaxed outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      />
+      <div className="flex items-center justify-between gap-2 px-2 pb-2">
+        <div className="flex min-w-0 items-center gap-0.5">{actions}</div>
+        {busy ? (
+          onStop ? (
+            <Button size="icon-sm" variant="ghost" aria-label="Stop" onClick={onStop}>
+              <Icon icon={StopCircleIcon} variant="stroke" />
+            </Button>
+          ) : null
+        ) : (
+          <Button
+            size="icon-sm"
+            variant="primary"
+            aria-label="Send"
+            disabled={disabled || !value.trim()}
+            onClick={() => onSubmit?.()}
+          >
+            <Icon icon={ArrowUp02Icon} variant="stroke" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export interface ChatSuggestItem {
+  id: string;
+  label: ReactNode;
+  hint?: ReactNode;
+  icon?: AppIcon;
+  group?: string;
+}
+
+export function ChatSuggest({
+  open,
+  items,
+  activeIndex = 0,
+  onActiveIndexChange,
+  onSelect,
+  emptyLabel = "No results",
+  className,
+}: {
+  open: boolean;
+  items: ChatSuggestItem[];
+  activeIndex?: number;
+  onActiveIndexChange?: (index: number) => void;
+  onSelect: (item: ChatSuggestItem) => void;
+  emptyLabel?: string;
+  className?: string;
+}) {
+  if (!open) return null;
+
+  const groups: { name?: string; items: { item: ChatSuggestItem; index: number }[] }[] = [];
+  let flat = 0;
+  for (const item of items) {
+    const last = groups[groups.length - 1];
+    if (last && last.name === item.group) {
+      last.items.push({ item, index: flat });
+    } else {
+      groups.push({ name: item.group, items: [{ item, index: flat }] });
+    }
+    flat += 1;
+  }
+
+  return (
+    <div
+      role="listbox"
+      className={cn(
+        "border-border bg-bg-elevated/70 animate-[item-in_var(--motion-duration)_var(--motion-ease)] z-[var(--z-popover)] max-h-64 overflow-y-auto overscroll-contain rounded-[var(--radius-md)] border p-1 shadow-[var(--shadow-md)] backdrop-blur-2xl outline-none",
+        className,
+      )}
+    >
+      {items.length === 0 ? (
+        <p className="text-fg-muted px-2 py-3 text-center text-sm">{emptyLabel}</p>
+      ) : (
+        groups.map((group, groupIndex) => (
+          <div key={group.name ?? groupIndex}>
+            {group.name ? (
+              <p className="text-fg-subtle px-2 py-1.5 text-[11px] font-medium tracking-wider uppercase">{group.name}</p>
+            ) : null}
+            {group.items.map(({ item, index }) => (
+              <button
+                key={item.id}
+                type="button"
+                role="option"
+                aria-selected={index === activeIndex}
+                className={cn(
+                  "flex w-full cursor-pointer items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1.5 text-sm outline-none",
+                  index === activeIndex ? "bg-bg-subtle text-fg" : "text-fg-muted",
+                )}
+                onMouseEnter={() => onActiveIndexChange?.(index)}
+                onClick={() => onSelect(item)}
+              >
+                {item.icon ? <Icon icon={item.icon} variant="stroke" size={16} className="text-fg-muted shrink-0" /> : null}
+                <span className="min-w-0 flex-1 truncate text-left">{item.label}</span>
+                {item.hint ? <span className="text-fg-subtle shrink-0 text-xs">{item.hint}</span> : null}
+              </button>
+            ))}
+          </div>
+        ))
+      )}
+    </div>
+  );
+}
+
+export function ChatMedia({
+  images,
+  pinned = false,
+  onPin,
+  actions,
+  className,
+}: {
+  images: ViewerImage[];
+  pinned?: boolean;
+  onPin?: () => void;
+  actions?: ReactNode;
+  className?: string;
+}) {
+  const single = images.length === 1;
+  if (images.length === 0) return null;
+  return (
+    <div className={cn("group/media relative max-w-lg", className)}>
+      {single ? (
+        <Image src={images[0].src} alt={images[0].alt} name={images[0].name} className="max-h-80 w-auto rounded-[var(--radius-md)] object-cover" />
+      ) : (
+        <ImageGallery images={images} />
+      )}
+      {pinned ? (
+        <Badge tone="accent" className="absolute top-2 left-2 gap-1 py-0.5">
+          <Icon icon={Pin02SolidIcon} size={12} />
+          Pinned
+        </Badge>
+      ) : null}
+      {onPin || actions ? (
+        <div
+          className={cn(
+            "absolute top-2 right-2 flex items-center gap-1 transition-opacity duration-[var(--motion-duration)] ease-[var(--motion-ease)] focus-within:opacity-100 group-hover/media:opacity-100",
+            pinned ? "opacity-100" : "opacity-0",
+          )}
+        >
+          {onPin ? (
+            <button
+              type="button"
+              aria-label={pinned ? "Unpin from context" : "Pin to context"}
+              aria-pressed={pinned}
+              onClick={onPin}
+              className={cn(
+                "border-border bg-bg-elevated/80 text-fg-muted hover:text-fg pointer-events-auto inline-flex size-7 cursor-pointer items-center justify-center rounded-[var(--radius-sm)] border backdrop-blur-md",
+                pinned && "text-accent",
+              )}
+            >
+              <Icon icon={pinned ? Pin02SolidIcon : Pin02Icon} size={14} />
+            </button>
+          ) : null}
+          {actions}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/index.ts

@@ -20,6 +20,17 @@ export {
   useSidebar,
 } from "./components/sidebar";
 export { Card, CardDescription, CardHeader, CardTitle } from "./components/card";
+export {
+  ChatActions,
+  ChatComposer,
+  ChatDiff,
+  ChatMedia,
+  ChatMessage,
+  ChatSuggest,
+  ChatThinking,
+  ChatToolCall,
+} from "./components/chat";
+export type { ChatSuggestItem, ChatToolStatus } from "./components/chat";
 export { BootScreen, PageLoader } from "./components/page-loader";
 export { Breadcrumb } from "./components/breadcrumb";
 export type { BreadcrumbItem } from "./components/breadcrumb";

package/src/styles.css

@@ -330,6 +330,11 @@ nav,
   to { opacity: 1; transform: scale(1); }
 }
 
+@keyframes chat-caret {
+  0%, 55% { opacity: 1; }
+  56%, 100% { opacity: 0; }
+}
+
 html[data-theme-switching] body {
   pointer-events: none !important;
 }