@hogoshi/ui 0.1.9 → 0.1.11

package/package.json

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

package/src/components/chat.tsx

@@ -4,26 +4,24 @@ import {
   Alert01Icon,
   ArrowDown01Icon,
   ArrowUp02Icon,
+  Attachment01Icon,
   Cancel01Icon,
-  Pin02Icon,
+  File01Icon,
+  FlashIcon,
   StopCircleIcon,
   Tick02Icon,
+  Upload04Icon,
 } 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 { useEffect, useRef, useState, 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 { Image, ImageGallery, ImageViewer, type ViewerImage } from "./image-viewer";
 import { Button } from "./button";
 import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "./collapsible";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu";
+import { Separator } from "./separator";
 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";
@@ -40,16 +38,52 @@ function ChatCaret() {
 export function ChatMessage({
   role,
   streaming = false,
+  attachments,
+  actions,
   className,
   children,
 }: {
   role: "user" | "assistant";
   streaming?: boolean;
+  attachments?: ViewerImage[];
+  actions?: ReactNode;
   className?: string;
   children: ReactNode;
 }) {
+  const [viewing, setViewing] = useState(false);
+  const [viewIndex, setViewIndex] = useState(0);
+
   return (
-    <div className={cn("group/chat flex w-full flex-col", role === "user" && "items-end", className)}>
+    <div className={cn("group/chat flex w-full min-w-0 flex-col", role === "user" && "items-end", className)}>
+      {attachments?.length ? (
+        <div
+          className={cn(
+            "mb-2 flex w-full max-w-[85%] flex-wrap gap-1.5",
+            role === "user" ? "justify-end" : "justify-start",
+          )}
+        >
+          {attachments.map((image, at) => (
+            <button
+              key={`${image.src}-${at}`}
+              type="button"
+              aria-label={`Open ${image.alt ?? "attachment"}`}
+              className="group/attachment border-border bg-bg-subtle focus-visible:ring-ring size-16 cursor-zoom-in overflow-hidden rounded-[var(--radius-sm)] border outline-none focus-visible:ring-2"
+              onClick={() => {
+                setViewIndex(at);
+                setViewing(true);
+              }}
+            >
+              <img
+                src={image.src}
+                alt={image.alt ?? ""}
+                loading="lazy"
+                draggable={false}
+                className="size-full object-cover transition-transform duration-[var(--motion-duration)] ease-[var(--motion-ease)] group-hover/attachment:scale-[1.05]"
+              />
+            </button>
+          ))}
+        </div>
+      ) : null}
       {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}
@@ -61,6 +95,16 @@ export function ChatMessage({
           {streaming ? <ChatCaret /> : null}
         </div>
       )}
+      {actions}
+      {attachments?.length ? (
+        <ImageViewer
+          images={attachments}
+          index={viewIndex}
+          open={viewing}
+          onOpenChange={setViewing}
+          onIndexChange={setViewIndex}
+        />
+      ) : null}
     </div>
   );
 }
@@ -97,7 +141,7 @@ export function ChatThinking({
 
   if (!reasoning) {
     return (
-      <div className={cn("flex items-center gap-2", className)}>
+      <div className={cn("flex min-w-0 items-center gap-2", className)}>
         {attention ? (
           <Icon
             icon={Alert01Icon}
@@ -112,17 +156,17 @@ export function ChatThinking({
   }
 
   return (
-    <Collapsible defaultOpen={defaultOpen} className={className}>
-      <CollapsibleTrigger className="group/thinking py-0.5">
+    <Collapsible defaultOpen={defaultOpen} className={cn("w-full min-w-0", className)}>
+      <CollapsibleTrigger className="group/thinking min-w-0 gap-2 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"
+          className="text-fg-subtle shrink-0 transition-transform duration-[var(--motion-duration)] ease-[var(--motion-ease)] group-data-[panel-open]/thinking:rotate-180"
         />
-        {label}
+        <span className="truncate">{label}</span>
       </CollapsibleTrigger>
-      <CollapsiblePanel className="hogoshi-selectable text-fg-muted py-1 pl-5 text-xs leading-relaxed">
+      <CollapsiblePanel className="hogoshi-selectable text-fg-muted min-w-0 py-1 pl-5 text-xs leading-relaxed">
         {reasoning}
       </CollapsiblePanel>
     </Collapsible>
@@ -173,8 +217,8 @@ export function ChatToolCall({
   }
 
   return (
-    <Collapsible defaultOpen={defaultOpen} className={className}>
-      <CollapsibleTrigger className="group/tool gap-2 py-0.5">
+    <Collapsible defaultOpen={defaultOpen} className={cn("w-full min-w-0", className)}>
+      <CollapsibleTrigger className="group/tool min-w-0 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}
@@ -185,7 +229,7 @@ export function ChatToolCall({
           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">
+      <CollapsiblePanel className="hogoshi-selectable my-1 ml-[7px] min-w-0 border-border border-l py-1 pr-1 pl-3.5">
         {children}
       </CollapsiblePanel>
     </Collapsible>
@@ -215,7 +259,7 @@ export function ChatDiff({ diff, className, ...props }: { diff: string } & Compo
   return (
     <div
       className={cn(
-        "border-border bg-bg-subtle max-h-72 overflow-auto rounded-[var(--radius-md)] border font-mono text-xs",
+        "border-border bg-bg-subtle max-h-72 min-w-0 w-full overflow-auto rounded-[var(--radius-md)] border font-mono text-xs",
         className,
       )}
       {...props}
@@ -229,6 +273,139 @@ export function ChatDiff({ diff, className, ...props }: { diff: string } & Compo
   );
 }
 
+export interface ChatContextItem {
+  id: string;
+  label: string;
+  src?: string;
+  icon?: AppIcon;
+}
+
+export interface ChatModelOption {
+  id: string;
+  label: string;
+  hint?: string;
+}
+
+function ContextChip({ item, onRemove }: { item: ChatContextItem; onRemove?: () => void }) {
+  return (
+    <span className="border-border bg-bg-subtle text-fg inline-flex h-7 max-w-[16rem] min-w-0 items-center gap-1.5 rounded-full border py-1 pr-1 pl-2.5">
+      {item.src ? (
+        <img src={item.src} alt="" draggable={false} className="size-4 shrink-0 rounded-full object-cover" />
+      ) : (
+        <Icon icon={item.icon ?? File01Icon} variant="stroke" size={12} className="text-fg-muted shrink-0" />
+      )}
+      <span className="min-w-0 truncate text-xs">{item.label}</span>
+      {onRemove ? (
+        <button
+          type="button"
+          aria-label={`Remove ${item.label}`}
+          onClick={onRemove}
+          className="text-fg-muted hover:text-fg focus-visible:ring-ring inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full outline-none focus-visible:ring-2"
+        >
+          <Icon icon={Cancel01Icon} variant="stroke" size={12} />
+        </button>
+      ) : null}
+    </span>
+  );
+}
+
+function ModelMenu({
+  model,
+  models,
+  onSelect,
+}: {
+  model: ChatModelOption;
+  models: ChatModelOption[];
+  onSelect?: (id: string) => void;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button size="sm" variant="ghost" aria-label="Select model" className="text-fg-muted h-7 px-1.5" />
+        }
+      >
+        <span className="inline-flex items-center gap-1.5">
+          <Icon icon={FlashIcon} variant="stroke" size={14} className="text-fg-subtle shrink-0" />
+          <span className="max-w-40 truncate text-xs">{model.label}</span>
+        </span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        {models.map((option) => (
+          <DropdownMenuItem key={option.id} onClick={() => onSelect?.(option.id)}>
+            {option.id === model.id ? (
+              <Icon icon={Tick02Icon} variant="stroke" size={16} className="text-accent shrink-0" />
+            ) : (
+              <span aria-hidden className="size-4 shrink-0" />
+            )}
+            <span className="truncate">{option.label}</span>
+            {option.hint ? <span className="text-fg-subtle ml-auto text-xs">{option.hint}</span> : null}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function ChatAttach({
+  items = [],
+  onInsert,
+  onUpload,
+  accept,
+  multiple = true,
+  className,
+}: {
+  items?: ChatSuggestItem[];
+  onInsert?: (id: string) => void;
+  onUpload?: (files: File[]) => void;
+  accept?: string;
+  multiple?: boolean;
+  className?: string;
+}) {
+  const input = useRef<HTMLInputElement>(null);
+  return (
+    <>
+      <input
+        ref={input}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        className="hidden"
+        onChange={(event) => {
+          const files = [...(event.target.files ?? [])];
+          event.target.value = "";
+          if (files.length) onUpload?.(files);
+        }}
+      />
+      <DropdownMenu>
+        <DropdownMenuTrigger render={<Button size="icon-sm" variant="ghost" aria-label="Attach" className={className} />}>
+          <Icon icon={Attachment01Icon} variant="stroke" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {items.length ? (
+            <>
+              <p className="text-fg-subtle px-2 py-1.5 text-[11px] font-medium tracking-wider uppercase">Project files</p>
+              <div className="max-h-60 overflow-y-auto overscroll-contain">
+                {items.map((item) => (
+                  <DropdownMenuItem key={item.id} onClick={() => onInsert?.(item.id)}>
+                    <Icon icon={item.icon ?? File01Icon} variant="stroke" size={16} className="text-fg-muted shrink-0" />
+                    <span className="min-w-0 truncate">{item.label}</span>
+                  </DropdownMenuItem>
+                ))}
+              </div>
+              <Separator className="my-1" />
+            </>
+          ) : null}
+          <DropdownMenuItem onClick={() => input.current?.click()}>
+            <Icon icon={Upload04Icon} variant="stroke" size={16} className="text-fg-muted shrink-0" />
+            Upload from computer
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+}
+
 export function ChatComposer({
   value,
   onValueChange,
@@ -238,6 +415,11 @@ export function ChatComposer({
   busy = false,
   placeholder,
   disabled,
+  context,
+  onRemoveContext,
+  model,
+  models,
+  onModelChange,
   actions,
   className,
 }: {
@@ -249,6 +431,11 @@ export function ChatComposer({
   busy?: boolean;
   placeholder?: string;
   disabled?: boolean;
+  context?: ChatContextItem[];
+  onRemoveContext?: (id: string) => void;
+  model?: ChatModelOption;
+  models?: ChatModelOption[];
+  onModelChange?: (id: string) => void;
   actions?: ReactNode;
   className?: string;
 }) {
@@ -268,6 +455,17 @@ export function ChatComposer({
         className,
       )}
     >
+      {context?.length ? (
+        <div className="flex flex-wrap gap-1.5 px-2.5 pt-2.5">
+          {context.map((item) => (
+            <ContextChip
+              key={item.id}
+              item={item}
+              onRemove={onRemoveContext ? () => onRemoveContext(item.id) : undefined}
+            />
+          ))}
+        </div>
+      ) : null}
       <textarea
         ref={textarea}
         rows={1}
@@ -283,10 +481,16 @@ export function ChatComposer({
             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"
+        className={cn(
+          "placeholder:text-fg-subtle max-h-48 w-full resize-none bg-transparent px-3.5 pb-2 text-sm leading-relaxed outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          context?.length ? "pt-2.5" : "pt-3",
+        )}
       />
       <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>
+        <div className="flex min-w-0 items-center gap-0.5">
+          {model && models?.length ? <ModelMenu model={model} models={models} onSelect={onModelChange} /> : null}
+          {actions}
+        </div>
         {busy ? (
           onStop ? (
             <Button size="icon-sm" variant="ghost" aria-label="Stop" onClick={onStop}>
@@ -391,53 +595,29 @@ export function ChatSuggest({
 
 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;
+  const single = images.length === 1;
   return (
-    <div className={cn("group/media relative max-w-lg", className)}>
+    <div className={cn("group/media relative min-w-0 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" />
+        <Image
+          src={images[0].src}
+          alt={images[0].alt}
+          name={images[0].name}
+          className="border-border max-h-48 w-auto max-w-full rounded-[var(--radius-md)] border object-cover"
+        />
       ) : (
-        <ImageGallery images={images} />
+        <ImageGallery images={images} className="min-w-0" />
       )}
-      {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 className="absolute top-2 right-2 flex items-center gap-1 opacity-0 transition-opacity duration-[var(--motion-duration)] ease-[var(--motion-ease)] focus-within:opacity-100 group-hover/media:opacity-100">
           {actions}
         </div>
       ) : null}

package/src/components/code-block.tsx

@@ -59,12 +59,14 @@ export function CodeBlock({
   language = "auto",
   variant = "full",
   showLanguage = true,
+  scroll = false,
   className,
 }: {
   code: string;
   language?: string;
   variant?: "full" | "snippet";
   showLanguage?: boolean;
+  scroll?: boolean;
   className?: string;
 }) {
   const [copied, setCopied] = useState(false);
@@ -110,8 +112,14 @@ export function CodeBlock({
           <TooltipContent>{copied ? "Copied" : "Copy"}</TooltipContent>
         </Tooltip>
       </div>
-      <pre className="hogoshi-code w-full min-w-0 max-w-full p-4 pr-24 font-mono text-xs wrap-anywhere whitespace-pre-wrap">
-        <code className="wrap-anywhere whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: painted.html }} />
+      <pre
+        className={cn(
+          "hogoshi-code w-full min-w-0 max-w-full p-4 pr-24 font-mono text-xs",
+          scroll ? "max-h-[28rem] overflow-auto whitespace-pre" : "wrap-anywhere whitespace-pre-wrap",
+          className,
+        )}
+      >
+        <code className={scroll ? "whitespace-pre" : "wrap-anywhere whitespace-pre-wrap"} dangerouslySetInnerHTML={{ __html: painted.html }} />
       </pre>
     </div>
   );

package/src/index.ts

@@ -22,6 +22,7 @@ export {
 export { Card, CardDescription, CardHeader, CardTitle } from "./components/card";
 export {
   ChatActions,
+  ChatAttach,
   ChatComposer,
   ChatDiff,
   ChatMedia,
@@ -30,7 +31,7 @@ export {
   ChatThinking,
   ChatToolCall,
 } from "./components/chat";
-export type { ChatSuggestItem, ChatToolStatus } from "./components/chat";
+export type { ChatContextItem, ChatModelOption, ChatSuggestItem, ChatToolStatus } from "./components/chat";
 export { BootScreen, PageLoader } from "./components/page-loader";
 export { Breadcrumb } from "./components/breadcrumb";
 export type { BreadcrumbItem } from "./components/breadcrumb";