@hogoshi/ui 0.1.10 → 0.1.11

package/package.json

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

package/src/components/chat.tsx

@@ -4,14 +4,14 @@ import {
   Alert01Icon,
   ArrowDown01Icon,
   ArrowUp02Icon,
+  Attachment01Icon,
   Cancel01Icon,
   File01Icon,
   FlashIcon,
-  Pin02Icon,
   StopCircleIcon,
   Tick02Icon,
+  Upload04Icon,
 } from "@hugeicons-pro/core-stroke-rounded";
-import { Pin02Icon as Pin02SolidIcon } from "@hugeicons-pro/core-solid-rounded";
 import { useEffect, useRef, useState, type ComponentProps, type ReactNode } from "react";
 import { cn } from "../lib/cn";
 import type { AppIcon } from "./icon";
@@ -20,6 +20,7 @@ import { Image, ImageGallery, ImageViewer, type ViewerImage } from "./image-view
 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";
 
 const workingText =
@@ -277,7 +278,6 @@ export interface ChatContextItem {
   label: string;
   src?: string;
   icon?: AppIcon;
-  pinned?: boolean;
 }
 
 export interface ChatModelOption {
@@ -286,15 +286,7 @@ export interface ChatModelOption {
   hint?: string;
 }
 
-function ContextChip({
-  item,
-  onTogglePin,
-  onRemove,
-}: {
-  item: ChatContextItem;
-  onTogglePin?: () => void;
-  onRemove?: () => void;
-}) {
+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 ? (
@@ -303,20 +295,6 @@ function ContextChip({
         <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>
-      {onTogglePin ? (
-        <button
-          type="button"
-          aria-label={item.pinned ? `Unpin ${item.label}` : `Pin ${item.label}`}
-          aria-pressed={item.pinned}
-          onClick={onTogglePin}
-          className={cn(
-            "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",
-            item.pinned && "text-accent",
-          )}
-        >
-          <Icon icon={item.pinned ? Pin02SolidIcon : Pin02Icon} size={12} />
-        </button>
-      ) : null}
       {onRemove ? (
         <button
           type="button"
@@ -347,8 +325,10 @@ function ModelMenu({
           <Button size="sm" variant="ghost" aria-label="Select model" className="text-fg-muted h-7 px-1.5" />
         }
       >
-        <Icon icon={FlashIcon} variant="stroke" size={14} className="text-fg-subtle" />
-        <span className="max-w-40 truncate text-xs">{model.label}</span>
+        <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) => (
@@ -367,6 +347,65 @@ function ModelMenu({
   );
 }
 
+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,
@@ -377,7 +416,6 @@ export function ChatComposer({
   placeholder,
   disabled,
   context,
-  onToggleContextPin,
   onRemoveContext,
   model,
   models,
@@ -394,7 +432,6 @@ export function ChatComposer({
   placeholder?: string;
   disabled?: boolean;
   context?: ChatContextItem[];
-  onToggleContextPin?: (id: string) => void;
   onRemoveContext?: (id: string) => void;
   model?: ChatModelOption;
   models?: ChatModelOption[];
@@ -424,7 +461,6 @@ export function ChatComposer({
             <ContextChip
               key={item.id}
               item={item}
-              onTogglePin={onToggleContextPin ? () => onToggleContextPin(item.id) : undefined}
               onRemove={onRemoveContext ? () => onRemoveContext(item.id) : undefined}
             />
           ))}
@@ -559,14 +595,10 @@ export function ChatSuggest({
 
 export function ChatMedia({
   images,
-  pinned = false,
-  onPin,
   actions,
   className,
 }: {
   images: ViewerImage[];
-  pinned?: boolean;
-  onPin?: () => void;
   actions?: ReactNode;
   className?: string;
 }) {
@@ -579,32 +611,13 @@ export function ChatMedia({
           src={images[0].src}
           alt={images[0].alt}
           name={images[0].name}
-          className="border-border max-h-60 w-auto max-w-full rounded-[var(--radius-md)] border object-cover"
+          className="border-border max-h-48 w-auto max-w-full rounded-[var(--radius-md)] border object-cover"
         />
       ) : (
         <ImageGallery images={images} className="min-w-0" />
       )}
-      {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/index.ts

@@ -22,6 +22,7 @@ export {
 export { Card, CardDescription, CardHeader, CardTitle } from "./components/card";
 export {
   ChatActions,
+  ChatAttach,
   ChatComposer,
   ChatDiff,
   ChatMedia,