@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/prompt-input.tsx

@@ -0,0 +1,343 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUp, FileText, Image as ImageIcon, Upload, X } from "lucide-react"
+import { cn } from "../lib/cn"
+import { Button, type ButtonProps } from "./button"
+import { Textarea } from "./input"
+import { Progress } from "./progress"
+import { Text, type TextColor } from "./text"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip"
+
+export type PromptInputSize = "sm" | "md"
+
+const SIZES = {
+  md: {
+    root: "ax:rounded-xl",
+    field: "ax:min-h-11 ax:px-md ax:pt-sm",
+    maxHeight: 8 * 24,
+    row: "ax:mt-lg ax:px-sm ax:pb-sm",
+    edge: "ax:px-sm ax:pt-xs",
+    hint: "ax:px-md ax:pb-sm",
+    button: "ax:size-9 ax:[&_svg]:size-4.5",
+  },
+  // For narrow chat columns and side panels.
+  sm: {
+    root: "ax:rounded-lg",
+    field: "ax:min-h-9 ax:px-sm ax:pt-xs",
+    maxHeight: 6 * 20,
+    row: "ax:mt-xs ax:px-xs ax:pb-xs",
+    edge: "ax:px-xs ax:pt-xs",
+    hint: "ax:px-sm ax:pb-xs",
+    button: "ax:size-8 ax:[&_svg]:size-4",
+  },
+} as const
+
+const PromptInputSizeContext = React.createContext<PromptInputSize>("md")
+
+export type CharacterCountTone = Extract<TextColor, "muted" | "warning" | "destructive">
+
+/** Hidden below 80% of the limit, then muted, warning from 90%, destructive once over. */
+export function characterCountTone(length: number, max: number): CharacterCountTone | null {
+  if (length < max * 0.8) return null
+  if (length > max) return "destructive"
+  return length >= max * 0.9 ? "warning" : "muted"
+}
+
+export function formatFileSize(bytes: number) {
+  return bytes >= 1024 * 1024 ? `${(bytes / (1024 * 1024)).toFixed(1)} MB` : `${Math.max(1, Math.round(bytes / 1024))} KB`
+}
+
+/** True when a drag carries files, so text or link drags pass through untouched. */
+export function isFileDrag(types: readonly string[]) {
+  return types.includes("Files")
+}
+
+export interface PromptInputActionProps extends Omit<ButtonProps, "size" | "asChild"> {
+  /** Accessible name, and the tooltip unless `tooltip` is set. */
+  label: string
+  /** Longer tooltip text, e.g. accepted file types. */
+  tooltip?: React.ReactNode
+  /** Renders as a toggle: sets `aria-pressed`. */
+  pressed?: boolean
+}
+
+/** A round icon button with a tooltip for the composer's action row (attach, voice). Sized by its PromptInput. */
+export const PromptInputAction = React.forwardRef<HTMLButtonElement, PromptInputActionProps>(
+  ({ label, tooltip, pressed, variant = "outline", className, ...props }, ref) => {
+    const size = React.useContext(PromptInputSizeContext)
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            ref={ref}
+            type="button"
+            variant={variant}
+            size="icon"
+            aria-label={label}
+            aria-pressed={pressed}
+            className={cn("ax:rounded-full", SIZES[size].button, className)}
+            {...props}
+          />
+        </TooltipTrigger>
+        <TooltipContent>{tooltip ?? label}</TooltipContent>
+      </Tooltip>
+    )
+  },
+)
+PromptInputAction.displayName = "PromptInputAction"
+
+export interface PromptInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit" | "defaultValue"> {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  /** Called with the trimmed text on Enter or Send. The field then clears and keeps focus. */
+  onSubmit: (text: string) => void
+  /** True while the assistant answers; Send becomes Stop. */
+  busy?: boolean
+  onStop?: () => void
+  disabled?: boolean
+  /** Shown under the field when `disabled`, e.g. why the assistant is unavailable. */
+  disabledReason?: string
+  placeholder?: string
+  /** Accessible name of the field. */
+  label?: string
+  /** Characters allowed; the counter appears from 80% and sending is blocked when over. */
+  maxLength?: number
+  /** Lets an empty field send, e.g. when files are attached. */
+  hasAttachments?: boolean
+  /** Extra gate on sending, e.g. false while uploads are in progress. */
+  canSubmit?: boolean
+  /** Muted note under the field when nothing more urgent applies, e.g. "Waiting for uploads to finish." */
+  hint?: React.ReactNode
+  /** Above the field: usually a list of `AttachmentChip`s. */
+  attachments?: React.ReactNode
+  /** Start of the action row: attach, tools. Use `PromptInputAction` for icon buttons. */
+  toolbar?: React.ReactNode
+  /** End of the action row, before Send: voice input, status badges. */
+  endActions?: React.ReactNode
+  /** Receives files pasted into the field; without it, pasting files does nothing special. */
+  onFilesPaste?: (files: File[]) => void
+  /** Receives files dropped on the composer, which shows a drop overlay while dragging. Ignored while `disabled`. */
+  onFilesDrop?: (files: File[]) => void
+  /** Extra line in the drop overlay, e.g. accepted types and size limit. */
+  dropHint?: React.ReactNode
+  /** `sm` is a tighter composer for narrow chat columns and side panels. */
+  size?: PromptInputSize
+}
+
+/**
+ * PromptInput - the composer for an AI feature: an auto-growing field (up to
+ * about 8 lines), Enter to send and Shift+Enter for a new line, Send or Stop,
+ * a character limit, and slots for attachments, tools and voice.
+ *
+ * @example
+ *   <PromptInput onSubmit={send} busy={replying} onStop={stop} toolbar={<AttachButton />} />
+ */
+export const PromptInput = React.forwardRef<HTMLDivElement, PromptInputProps>(
+  (
+    {
+      value: valueProp, defaultValue = "", onValueChange, onSubmit, busy = false, onStop, disabled = false,
+      disabledReason, placeholder = "Ask anything", label = "Prompt", maxLength = 2000, hasAttachments = false,
+      canSubmit = true, hint: extraHint, attachments, toolbar, endActions, onFilesPaste, onFilesDrop, dropHint, size = "md", className, ...props
+    },
+    ref,
+  ) => {
+    const id = React.useId()
+    const [uncontrolled, setUncontrolled] = React.useState(defaultValue)
+    const text = valueProp ?? uncontrolled
+    const fieldRef = React.useRef<HTMLTextAreaElement>(null)
+    const [dragging, setDragging] = React.useState(false)
+    const sizes = SIZES[size]
+    const droppable = Boolean(onFilesDrop) && !disabled
+
+    function setText(next: string) {
+      if (valueProp === undefined) setUncontrolled(next)
+      onValueChange?.(next)
+    }
+
+    React.useLayoutEffect(() => {
+      const field = fieldRef.current
+      if (!field) return
+      field.style.height = "auto"
+      field.style.height = `${Math.min(field.scrollHeight, sizes.maxHeight)}px`
+    }, [text, sizes.maxHeight])
+
+    const tooLong = text.length > maxLength
+    const hasContent = text.trim().length > 0 || hasAttachments
+    const canSend = hasContent && !tooLong && canSubmit && !disabled && !busy
+    const tone = characterCountTone(text.length, maxLength)
+
+    function submit() {
+      if (!canSend) return
+      onSubmit(text.trim())
+      setText("")
+      fieldRef.current?.focus()
+    }
+
+    const hint = disabled
+      ? disabledReason
+      : tooLong
+        ? `Shorten your message by ${(text.length - maxLength).toLocaleString("en-US")} characters to send it.`
+        : extraHint
+
+    return (
+      <PromptInputSizeContext.Provider value={size}>
+        <div
+          ref={ref}
+          data-slot="prompt-input"
+          data-size={size}
+          className={cn(
+            sizes.root,
+            "ax:relative ax:flex ax:cursor-text ax:flex-col ax:border ax:border-input ax:bg-popover ax:pt-1 ax:shadow-xs ax:transition-[border-color,box-shadow]",
+            "ax:focus-within:border-ring ax:focus-within:ring-2 ax:focus-within:ring-ring/20",
+            tooLong && "ax:border-destructive ax:ring-2 ax:ring-destructive/20 ax:focus-within:border-destructive ax:focus-within:ring-destructive/20",
+            disabled && "ax:cursor-not-allowed ax:opacity-60",
+            className,
+          )}
+          onClick={(event) => {
+            if (!disabled && event.target === event.currentTarget) fieldRef.current?.focus()
+          }}
+          onDragOver={droppable ? (event) => {
+            if (!isFileDrag(event.dataTransfer.types)) return
+            event.preventDefault()
+            setDragging(true)
+          } : undefined}
+          onDragLeave={droppable ? (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDragging(false)
+          } : undefined}
+          onDrop={droppable ? (event) => {
+            if (!isFileDrag(event.dataTransfer.types)) return
+            event.preventDefault()
+            setDragging(false)
+            onFilesDrop?.([...event.dataTransfer.files])
+          } : undefined}
+          {...props}
+        >
+          {attachments && <div className={sizes.edge}>{attachments}</div>}
+
+          <Textarea
+            ref={fieldRef}
+            value={text}
+            disabled={disabled}
+            onChange={(event) => setText(event.target.value)}
+            onPaste={(event) => {
+              const files = [...event.clipboardData.files]
+              if (files.length && onFilesPaste) {
+                event.preventDefault()
+                onFilesPaste(files)
+              }
+            }}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+                event.preventDefault()
+                submit()
+              }
+            }}
+            rows={1}
+            resize="none"
+            placeholder={placeholder}
+            aria-label={label}
+            aria-invalid={tooLong || undefined}
+            aria-describedby={hint ? `${id}-hint` : undefined}
+            // The container owns the border, focus ring and invalid ring; the field stays bare inside it.
+            className={cn(sizes.field, "ax:border-0 ax:bg-transparent ax:text-sm ax:leading-snug ax:shadow-none ax:focus-visible:ring-0 ax:focus-visible:ring-offset-0 ax:aria-[invalid=true]:ring-0 ax:disabled:bg-transparent")}
+          />
+
+          <div className={cn("ax:flex ax:items-center ax:justify-between ax:gap-xs", sizes.row)}>
+            <div className="ax:flex ax:items-center ax:gap-xs">{toolbar}</div>
+            <div className="ax:flex ax:items-center ax:gap-xs">
+              {tone && (
+                <Text size="1" color={tone} weight="medium" className="ax:tabular-nums" aria-live="polite">
+                  {text.length.toLocaleString("en-US")} / {maxLength.toLocaleString("en-US")}
+                </Text>
+              )}
+              {endActions}
+              {busy ? (
+                <Button size="icon" aria-label="Stop generating" onClick={onStop} className={cn("ax:rounded-full", sizes.button)}>
+                  <span className="ax:size-3 ax:rounded-xs ax:bg-current" aria-hidden />
+                </Button>
+              ) : (
+                <Button size="icon" aria-label="Send message" disabled={!canSend} onClick={submit} className={cn("ax:rounded-full", sizes.button)}>
+                  <ArrowUp />
+                </Button>
+              )}
+            </div>
+          </div>
+
+          {hint && (
+            <Text as="p" id={`${id}-hint`} size="1" color={tooLong ? "destructive" : "muted"} className={sizes.hint}>
+              {hint}
+            </Text>
+          )}
+
+          {droppable && dragging && (
+            <div className="ax:pointer-events-none ax:absolute ax:inset-0 ax:flex ax:flex-col ax:items-center ax:justify-center ax:gap-xs ax:rounded-[inherit] ax:border-2 ax:border-dashed ax:border-primary ax:bg-background/90">
+              <Upload className="ax:size-5 ax:text-primary-foreground" aria-hidden />
+              <Text size="2" weight="medium">Drop files to attach</Text>
+              {dropHint && <Text size="1" color="muted">{dropHint}</Text>}
+            </div>
+          )}
+        </div>
+      </PromptInputSizeContext.Provider>
+    )
+  },
+)
+PromptInput.displayName = "PromptInput"
+
+export interface AttachmentChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  name: string
+  /** Bytes; shown once the upload finishes. */
+  size: number
+  kind?: "image" | "file"
+  /** Thumbnail for images. */
+  previewUrl?: string
+  /** 0-100 while uploading; omit or 100 when done. */
+  progress?: number
+  /** Replaces size and progress, and tints the chip. */
+  error?: string
+  onRemove: () => void
+}
+
+/** One file attached to a prompt: thumbnail or icon, name, then upload progress, size or the error. */
+export const AttachmentChip = React.forwardRef<HTMLDivElement, AttachmentChipProps>(
+  ({ name, size, kind = "file", previewUrl, progress = 100, error, onRemove, className, ...props }, ref) => {
+    const uploading = !error && progress < 100
+    return (
+      <div
+        ref={ref}
+        data-slot="attachment-chip"
+        className={cn(
+          "ax:flex ax:w-64 ax:items-center ax:gap-sm ax:rounded-md ax:border ax:border-border ax:bg-card ax:p-xs",
+          error && "ax:border-destructive-weaker ax:bg-destructive-weakest",
+          className,
+        )}
+        {...props}
+      >
+        <div className="ax:flex ax:size-10 ax:shrink-0 ax:items-center ax:justify-center ax:overflow-hidden ax:rounded ax:bg-muted ax:text-muted-foreground">
+          {previewUrl ? (
+            <img src={previewUrl} alt="" className="ax:size-full ax:object-cover" />
+          ) : kind === "image" ? (
+            <ImageIcon className="ax:size-4" aria-hidden />
+          ) : (
+            <FileText className="ax:size-4" aria-hidden />
+          )}
+        </div>
+        <div className="ax:flex ax:min-w-0 ax:flex-1 ax:flex-col ax:gap-1">
+          <Text size="2" weight="medium" truncate>{name}</Text>
+          {error ? (
+            <Text size="1" color="destructive" truncate>{error}</Text>
+          ) : uploading ? (
+            <Progress value={progress} size="sm" aria-label={`Uploading ${name}`} />
+          ) : (
+            <Text size="1" color="muted">{formatFileSize(size)}</Text>
+          )}
+        </div>
+        <Button variant="ghost" size="icon-sm" aria-label={`Remove ${name}`} onClick={onRemove} className="ax:shrink-0 ax:rounded-full">
+          <X />
+        </Button>
+      </div>
+    )
+  },
+)
+AttachmentChip.displayName = "AttachmentChip"

package/src/components/prompt-suggestions.stories.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Building2, Calculator, Home, MapPin } from "lucide-react"
+import { StarterPrompts, SuggestionChips } from "./prompt-suggestions"
+
+const FOLLOW_UPS = [
+  "Compare with Saadiyat Lagoons",
+  "Show only 4-bed townhouses",
+  "What are the service charges?",
+  "Book a viewing this weekend",
+]
+
+const meta: Meta<typeof SuggestionChips> = {
+  title: "Components/SuggestionChips",
+  component: SuggestionChips,
+  tags: ["autodocs"],
+  argTypes: { onPick: { control: false }, onRefresh: { control: false } },
+  args: { suggestions: FOLLOW_UPS, onPick: () => undefined },
+}
+
+export default meta
+type Story = StoryObj<typeof SuggestionChips>
+
+export const Default: Story = {}
+
+export const Wrapped: Story = { args: { wrap: true } }
+
+export const Loading: Story = { args: { loading: true, onRefresh: () => undefined } }
+
+export const InsertTemplates: Story = {
+  args: {
+    insert: true,
+    wrap: true,
+    label: "Prompt templates",
+    suggestions: ["Find [bedrooms]-bed homes in [community]", "What's the price per sq ft in [community]?"],
+  },
+}
+
+export const Starters: Story = {
+  render: () => (
+    <div style={{ maxWidth: 640 }}>
+      <StarterPrompts
+        onPick={() => undefined}
+        starters={[
+          { icon: Home, title: "Find a home", prompt: "Show me 3-bed villas in Yas Island under AED 6M" },
+          { icon: Calculator, title: "Check affordability", prompt: "What can I afford with AED 40,000 a month?" },
+          { icon: MapPin, title: "Compare communities", prompt: "Compare Saadiyat and Al Reem for families" },
+          { icon: Building2, title: "Track a project", prompt: "When is Saadiyat Lagoons phase 2 handing over?" },
+        ]}
+      />
+    </div>
+  ),
+}

package/src/components/prompt-suggestions.test.tsx

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { StarterPrompts, SuggestionChips } from "./prompt-suggestions"
+
+const pick = () => undefined
+
+describe("SuggestionChips", () => {
+  it("renders one button per prompt inside a labelled group", () => {
+    const html = renderToStaticMarkup(<SuggestionChips suggestions={["One", "Two"]} onPick={pick} label="Follow-ups" />)
+    expect(html).toMatch(/role="group" aria-label="Follow-ups" aria-busy="false"/)
+    expect(html.match(/<button/g)).toHaveLength(2)
+  })
+
+  it("swaps chips for skeletons and marks the group busy while loading", () => {
+    const html = renderToStaticMarkup(<SuggestionChips suggestions={["One", "Two"]} onPick={pick} loading />)
+    expect(html).toContain('aria-busy="true"')
+    expect(html).not.toContain("<button")
+    expect(html).toContain("Loading suggestions")
+  })
+
+  it("labels insert-mode chips as edits", () => {
+    const html = renderToStaticMarkup(<SuggestionChips suggestions={["Find homes"]} onPick={pick} insert />)
+    expect(html).toContain('aria-label="Edit prompt: Find homes"')
+  })
+})
+
+describe("StarterPrompts", () => {
+  it("shows each starter's title and full prompt", () => {
+    const html = renderToStaticMarkup(
+      <StarterPrompts starters={[{ title: "Find a home", prompt: "Show me villas" }]} onPick={pick} />,
+    )
+    expect(html).toContain('aria-label="Ways to start"')
+    expect(html).toContain("Find a home")
+    expect(html).toContain("Show me villas")
+  })
+})

package/src/components/prompt-suggestions.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import { PenLine, RefreshCw } from "lucide-react"
+import { cn } from "../lib/cn"
+import { Button } from "./button"
+import { Skeleton } from "./skeleton"
+import { Text } from "./text"
+
+export interface SuggestionChipsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  suggestions: string[]
+  onPick: (prompt: string) => void
+  /** Accessible name of the chip group. */
+  label?: string
+  /** Swaps each chip for a skeleton and marks the group busy. */
+  loading?: boolean
+  /** E.g. while the assistant replies. */
+  disabled?: boolean
+  /** Chips put the prompt in the composer for editing instead of sending it. */
+  insert?: boolean
+  /** Adds an "Other suggestions" button under the row. */
+  onRefresh?: () => void
+  /** Wrap onto several lines instead of one horizontally scrolling row. */
+  wrap?: boolean
+}
+
+/**
+ * SuggestionChips - a row of prompt chips. Each chip is a button labelled with
+ * the full prompt it sends.
+ *
+ * @example
+ *   <SuggestionChips suggestions={followUps} onPick={send} onRefresh={nextRound} />
+ */
+export const SuggestionChips = React.forwardRef<HTMLDivElement, SuggestionChipsProps>(
+  ({ suggestions, onPick, label = "Suggested prompts", loading = false, disabled = false, insert = false, onRefresh, wrap = false, className, ...props }, ref) => (
+    <div ref={ref} data-slot="suggestion-chips" className={cn("ax:flex ax:flex-col ax:gap-xs", className)} {...props}>
+      <div
+        role="group"
+        aria-label={label}
+        aria-busy={loading}
+        className={cn("ax:flex ax:gap-xs", wrap ? "ax:flex-wrap" : "ax:overflow-x-auto ax:pb-1")}
+      >
+        {loading
+          ? suggestions.map((prompt) => <Skeleton key={prompt} className="ax:h-3xl ax:w-44 ax:shrink-0 ax:rounded-full" />)
+          : suggestions.map((prompt) => (
+              <Button
+                key={prompt}
+                variant="outline"
+                size="sm"
+                disabled={disabled}
+                onClick={() => onPick(prompt)}
+                aria-label={insert ? `Edit prompt: ${prompt}` : undefined}
+                className="ax:shrink-0 ax:rounded-full ax:font-normal"
+              >
+                {insert && <PenLine />}
+                {prompt}
+              </Button>
+            ))}
+      </div>
+      {/* Outside the scrolling row, so it never ends up hidden past the last chip. */}
+      {onRefresh && (
+        <Button variant="ghost" size="sm" disabled={disabled || loading} onClick={onRefresh} className="ax:self-start ax:rounded-full">
+          <RefreshCw />
+          Other suggestions
+        </Button>
+      )}
+      <span className="ax:sr-only" aria-live="polite">{loading ? "Loading suggestions" : ""}</span>
+    </div>
+  ),
+)
+SuggestionChips.displayName = "SuggestionChips"
+
+export interface StarterPromptItem {
+  /** Decorative; the title names the starter. */
+  icon?: React.ElementType
+  /** Short, scannable name. */
+  title: string
+  /** The full prompt sent when picked. */
+  prompt: string
+}
+
+export interface StarterPromptsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  starters: StarterPromptItem[]
+  onPick: (prompt: string) => void
+  /** Accessible name of the group. */
+  label?: string
+}
+
+/**
+ * StarterPrompts - empty-state starters in a two-column grid: a short title
+ * for scanning, the full prompt underneath.
+ */
+export const StarterPrompts = React.forwardRef<HTMLDivElement, StarterPromptsProps>(
+  ({ starters, onPick, label = "Ways to start", className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="starter-prompts"
+      role="group"
+      aria-label={label}
+      className={cn("ax:grid ax:gap-sm ax:sm:grid-cols-2", className)}
+      {...props}
+    >
+      {starters.map(({ icon: Icon, title, prompt }) => (
+        <Button
+          key={title}
+          variant="outline"
+          onClick={() => onPick(prompt)}
+          // Icon in its own column so the prompt lines up under the title, not the icon.
+          className={cn(
+            "ax:grid ax:h-auto ax:items-center ax:justify-start ax:gap-x-xs ax:gap-y-1 ax:whitespace-normal ax:rounded-md ax:p-sm ax:text-start ax:shadow-none ax:hover:bg-muted",
+            Icon ? "ax:grid-cols-[auto_minmax(0,1fr)]" : "ax:grid-cols-1",
+          )}
+        >
+          {Icon && <Icon className="ax:text-primary-foreground" aria-hidden />}
+          <Text size="2" weight="medium">{title}</Text>
+          <Text size="1" color="muted" wrap="pretty" className={cn("ax:font-normal", Icon && "ax:col-start-2")}>{prompt}</Text>
+        </Button>
+      ))}
+    </div>
+  ),
+)
+StarterPrompts.displayName = "StarterPrompts"

package/src/components/quota-bar.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { QuotaBar } from "./quota-bar"
+
+const meta: Meta<typeof QuotaBar> = {
+  title: "Components/QuotaBar",
+  component: QuotaBar,
+  tags: ["autodocs"],
+  args: {
+    used: 72,
+    total: 100,
+    unit: "GB",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof QuotaBar>
+
+export const Default: Story = {}