@kitnai/chat 0.3.1 → 0.5.0

package/src/components/prompt-input.tsx

@@ -72,7 +72,12 @@ function PromptInput(props: PromptInputProps) {
       <div
         onClick={handleClick}
         class={cn(
+          // The inner textarea neutralizes its own ring (focus-visible:ring-0),
+          // so the FRAME owns the focus affordance: a blue ring whenever a
+          // control inside it is focused. Without this the composer had no
+          // visible keyboard-focus state.
           'bg-muted/40 cursor-text rounded-xl p-2 shadow-xs',
+          'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-0',
           local.disabled && 'cursor-not-allowed opacity-60',
           local.class
         )}
@@ -121,8 +126,21 @@ function PromptInputTextarea(props: PromptInputTextareaProps) {
   ));
 
   function handleInput(e: InputEvent & { currentTarget: HTMLTextAreaElement }) {
-    adjustHeight(e.currentTarget);
-    ctx.setValue(e.currentTarget.value);
+    const el = e.currentTarget;
+    let value = el.value;
+    // Disallow leading whitespace — a prompt can't start with a space or blank
+    // line. Strip it (covers typing a space at the start AND pasting) and keep
+    // the caret in the right place.
+    if (/^\s/.test(value)) {
+      const stripped = value.replace(/^\s+/, '');
+      const removed = value.length - stripped.length;
+      const caret = Math.max(0, (el.selectionStart ?? 0) - removed);
+      el.value = stripped;
+      el.setSelectionRange(caret, caret);
+      value = stripped;
+    }
+    adjustHeight(el);
+    ctx.setValue(value);
   }
 
   function handleKeyDown(e: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) {

package/src/components/reasoning.tsx

@@ -74,7 +74,7 @@ function ReasoningTrigger(props: ReasoningTriggerProps) {
 
   return (
     <button
-      class={cn('flex cursor-pointer items-center gap-2', local.class)}
+      class={cn('flex cursor-pointer items-center gap-2 text-meta', local.class)}
       onClick={() => onOpenChange(!isOpen())}
       {...rest}
     >
@@ -142,7 +142,7 @@ function ReasoningContent(props: ReasoningContentProps) {
           // Markdown content is styled by the token-based `.chat-markdown` (see
           // Markdown component), which themes via design tokens — so no Tailwind
           // `prose`/`dark:prose-invert` is needed (those wouldn't follow a scoped theme).
-          'text-muted-foreground',
+          'text-muted-foreground text-body',
           local.contentClass
         )}
       >

package/src/components/scroll-button.tsx

@@ -16,6 +16,7 @@ function ScrollButton(props: ScrollButtonProps) {
     <Button
       variant={props.variant ?? 'outline'}
       size={props.size ?? 'sm'}
+      aria-label="Scroll to bottom"
       class={cn(
         'h-10 w-10 rounded-full transition-all duration-150 ease-out',
         !isAtBottom()

package/src/components/slash-command.tsx

@@ -99,11 +99,20 @@ function SlashCommand(props: SlashCommandProps) {
   });
 
   function selectItem(item: SlashCommandItem) {
-    ctx.setValue("");
+    // Insert the chosen command into the prompt (e.g. "/summarize ") so it
+    // appears in the input ready to send or edit. The trailing space ends the
+    // slash token, which closes the palette. Still fire onSelect so consumers
+    // can react to the selection.
+    ctx.setValue(item.label + " ");
     setOpen(false);
     props.onSelect(item);
-    // Refocus textarea
-    setTimeout(() => ctx.textareaRef?.focus(), 0);
+    // Refocus the textarea and place the caret at the end.
+    setTimeout(() => {
+      const ta = ctx.textareaRef;
+      if (!ta) return;
+      ta.focus();
+      ta.setSelectionRange(ta.value.length, ta.value.length);
+    }, 0);
   }
 
   function handleKeyDown(e: KeyboardEvent) {
@@ -163,7 +172,7 @@ function SlashCommand(props: SlashCommandProps) {
             {([category, items]) => (
               <>
                 <Show when={category}>
-                  <div class="px-3 pt-2 pb-1 text-[10px] font-semibold text-muted-foreground/60 uppercase tracking-wide">
+                  <div class="px-3 pt-2 pb-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wide">
                     {category}
                   </div>
                 </Show>
@@ -189,11 +198,11 @@ function SlashCommand(props: SlashCommandProps) {
                             <div class="text-xs flex items-center gap-1.5">
                               {item.label}
                               <Show when={isActive()}>
-                                <span class="text-[10px] text-violet-400">active</span>
+                                <span class="text-[10px] text-violet-600 dark:text-violet-400">active</span>
                               </Show>
                             </div>
                             <Show when={item.description}>
-                              <div class="text-xs text-muted-foreground/50 truncate">
+                              <div class="text-xs text-muted-foreground truncate">
                                 {item.description}
                               </div>
                             </Show>
@@ -202,9 +211,9 @@ function SlashCommand(props: SlashCommandProps) {
                           <Show when={isActive()}>
                             <span class="w-1 h-1 rounded-full bg-violet-400 flex-shrink-0" />
                           </Show>
-                          <span class={cn("text-xs flex-shrink-0", isActive() && "text-violet-400")}>{item.label}</span>
+                          <span class={cn("text-xs flex-shrink-0", isActive() && "text-violet-600 dark:text-violet-400")}>{item.label}</span>
                           <Show when={item.description}>
-                            <span class="text-xs text-muted-foreground/40 truncate">{item.description}</span>
+                            <span class="text-xs text-muted-foreground truncate">{item.description}</span>
                           </Show>
                         </Show>
                       </button>

package/src/components/source.tsx

@@ -35,7 +35,7 @@ function Source(props: SourceProps) {
 
   return (
     <SourceContext.Provider value={{ get href() { return props.href; }, get domain() { return domain(); } }}>
-      <HoverCardRoot openDelay={150} closeDelay={0}>
+      <HoverCardRoot openDelay={150}>
         {props.children}
       </HoverCardRoot>
     </SourceContext.Provider>
@@ -61,7 +61,7 @@ function SourceTrigger(props: SourceTriggerProps) {
         target="_blank"
         rel="noopener noreferrer"
         class={cn(
-          'bg-muted text-muted-foreground hover:bg-muted-foreground/30 hover:text-primary inline-flex h-5 max-w-32 items-center gap-1 overflow-hidden rounded-full py-0 text-xs no-underline transition-colors duration-150',
+          'bg-muted text-muted-foreground hover:bg-muted-foreground/30 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background inline-flex h-5 max-w-32 items-center gap-1 overflow-hidden rounded-full py-0 text-xs no-underline transition-colors duration-150',
           props.showFavicon ? 'pr-2 pl-1' : 'px-2',
           props.class
         )}

package/src/components/thinking-bar.tsx

@@ -22,7 +22,7 @@ function ThinkingBar(props: ThinkingBarProps) {
       <Show
         when={local.onClick}
         fallback={
-          <TextShimmer class="cursor-default font-medium">{text()}</TextShimmer>
+          <TextShimmer class="cursor-default text-sm font-medium">{text()}</TextShimmer>
         }
       >
         <button
@@ -30,7 +30,7 @@ function ThinkingBar(props: ThinkingBarProps) {
           onClick={local.onClick}
           class="flex items-center gap-1 text-sm transition-opacity hover:opacity-80"
         >
-          <TextShimmer class="font-medium">{text()}</TextShimmer>
+          <TextShimmer class="text-sm font-medium">{text()}</TextShimmer>
           <ChevronRight class="text-muted-foreground size-4" />
         </button>
       </Show>

package/src/components/tool.tsx

@@ -46,10 +46,19 @@ function ToolStateIcon(props: { state: ToolPart['state'] }) {
   );
 }
 
-// Status chips: a saturated hue as text over a 15% translucent fill of the same
-// hue. This reads on both light and dark surfaces (mirroring the inline-code chip),
-// so it needs no `dark:` variant — which wouldn't follow a token-scoped theme anyway.
-const STATE_HUE: Record<ToolPart['state'], string> = {
+// Status chips: a hue as text over a 15% translucent fill of the same hue
+// (mirroring the inline-code chip). The TEXT color comes from a theme token
+// (--color-tool-*) whose light value is darkened so it reaches WCAG AA (4.5:1)
+// on the faint fill, while dark mode keeps a brighter hue for AA on the dark
+// surface — both modes resolve via the token's `.dark` override. The FILL keeps
+// a fixed bright hue so the chip's colored tint looks the same in both modes.
+const STATE_TOKEN: Record<ToolPart['state'], string> = {
+  'input-streaming': 'var(--color-tool-blue)',
+  'input-available': 'var(--color-tool-amber)',
+  'output-available': 'var(--color-tool-green)',
+  'output-error': 'var(--color-tool-red)',
+};
+const STATE_FILL: Record<ToolPart['state'], string> = {
   'input-streaming': 'hsl(217 91% 60%)', // blue
   'input-available': 'hsl(38 92% 50%)', // amber
   'output-available': 'hsl(142 71% 45%)', // green
@@ -57,8 +66,10 @@ const STATE_HUE: Record<ToolPart['state'], string> = {
 };
 
 function stateChip(state: ToolPart['state']): JSX.CSSProperties {
-  const hue = STATE_HUE[state];
-  return { color: hue, background: `color-mix(in oklab, ${hue} 15%, transparent)` };
+  return {
+    color: STATE_TOKEN[state],
+    background: `color-mix(in oklab, ${STATE_FILL[state]} 15%, transparent)`,
+  };
 }
 
 function ToolStateBadge(props: { state: ToolPart['state'] }) {

package/src/components/voice-input.tsx

@@ -16,6 +16,9 @@ export function VoiceInput(props: VoiceInputProps) {
   const { isRecording, start, stop } = useVoiceRecorder();
   const [isProcessing, setIsProcessing] = createSignal(false);
 
+  const label = () =>
+    isProcessing() ? 'Transcribing...' : isRecording() ? 'Stop recording' : 'Voice input';
+
   async function handleClick() {
     if (isRecording()) {
       stop();
@@ -76,10 +79,11 @@ export function VoiceInput(props: VoiceInputProps) {
         </For>
       </Show>
 
-      <Tooltip content={isProcessing() ? 'Transcribing...' : isRecording() ? 'Stop recording' : 'Voice input'}>
+      <Tooltip content={label()}>
         <Button
           variant="ghost"
           size="icon-sm"
+          aria-label={label()}
           onClick={handleClick}
           disabled={local.disabled || isProcessing()}
           class={cn(

package/src/elements/attachments.tsx

@@ -0,0 +1,132 @@
+import { For, Show } from 'solid-js';
+import { defineKitnElement } from './define';
+import {
+  Attachments,
+  Attachment,
+  AttachmentPreview,
+  AttachmentInfo,
+  AttachmentRemove,
+  AttachmentHoverCard,
+  AttachmentHoverCardTrigger,
+  AttachmentHoverCardContent,
+  AttachmentEmpty,
+  getAttachmentLabel,
+  getMediaCategory,
+  type AttachmentData,
+  type AttachmentVariant,
+} from '../components/attachments';
+
+interface Props extends Record<string, unknown> {
+  /** The attachments to render. Set as a JS property (array). */
+  items: AttachmentData[];
+  /** Layout: `grid` = visual tiles, `inline` = icon + label chips, `list` = rows. */
+  variant?: AttachmentVariant;
+  /** Wrap each item in a hover card that previews its details. */
+  hoverCard?: boolean;
+  /** Show a remove button per item; clicking it fires a `remove` event. */
+  removable?: boolean;
+  /** Also show the media type beneath the filename (non-grid variants). */
+  showMediaType?: boolean;
+  /** Text shown when `items` is empty. */
+  emptyText?: string;
+}
+
+/** Events fired by `<kitn-attachments>`. */
+interface Events {
+  /** A remove button was clicked. */
+  remove: { id: string };
+}
+
+/**
+ * `<kitn-attachments>` — the exemplar for the "collapse a compound primitive to
+ * ONE configurable element" pattern (Route 1). The presentation knobs that the
+ * SolidJS layer expresses by composing sub-parts (`<AttachmentPreview>`,
+ * `<AttachmentInfo>`, `<AttachmentHoverCard>`, `<AttachmentRemove>`) become
+ * attributes/flags here:
+ *
+ *   - icon + label .......... `variant="inline"`
+ *   - visual + hover card .... `variant="grid" hover-card`
+ *   - removable chips ........ add `removable` (emits `remove` → { id })
+ *
+ * Data in via the `items` property; the only interaction (`remove`) comes back
+ * as an event. For fully-custom hover content, the SolidJS primitives remain the
+ * escape hatch (a templated slot — "Route 2" — is a deliberate future add).
+ */
+defineKitnElement<Props, Events>('kitn-attachments', {
+  items: [],
+  variant: 'grid',
+  hoverCard: false,
+  removable: false,
+  showMediaType: false,
+  emptyText: undefined,
+}, (props, { dispatch, flag }) => {
+  const variant = () => props.variant ?? 'grid';
+  const hoverCard = () => flag('hoverCard');
+  const removable = () => flag('removable');
+  const showMediaType = () => flag('showMediaType');
+
+  return (
+    <Show
+      when={props.items.length}
+      fallback={<Show when={props.emptyText}><AttachmentEmpty>{props.emptyText}</AttachmentEmpty></Show>}
+    >
+      <Attachments variant={variant()}>
+        <For each={props.items}>
+          {(item) => (
+            <Attachment
+              data={item}
+              onRemove={removable() ? () => dispatch('remove', { id: item.id }) : undefined}
+            >
+              <Show
+                when={hoverCard() && variant() !== 'grid'}
+                fallback={
+                  <>
+                    <AttachmentPreview />
+                    {/* Info only for non-grid; grid is a self-contained visual tile. */}
+                    <Show when={variant() !== 'grid'}>
+                      <AttachmentInfo showMediaType={showMediaType()} />
+                    </Show>
+                  </>
+                }
+              >
+                {/* Hover preview is for compact inline/list chips; grid tiles are
+                    already the visual, so they skip it (wrapping them would also
+                    collapse non-image tiles to the icon's height). */}
+                <AttachmentHoverCard>
+                  <AttachmentHoverCardTrigger>
+                    <div class="flex items-center gap-1.5">
+                      <AttachmentPreview />
+                      <AttachmentInfo showMediaType={showMediaType()} />
+                    </div>
+                  </AttachmentHoverCardTrigger>
+                  <AttachmentHoverCardContent>
+                    {/* For image attachments, preview the actual thumbnail;
+                        otherwise fall back to the label + media-type details. */}
+                    <Show
+                      when={getMediaCategory(item) === 'image' && item.type === 'file' && item.url}
+                      fallback={
+                        <>
+                          <div class="text-body font-medium">{getAttachmentLabel(item)}</div>
+                          <Show when={item.mediaType}>
+                            <div class="text-muted-foreground text-caption">{item.mediaType}</div>
+                          </Show>
+                        </>
+                      }
+                    >
+                      <img
+                        src={item.url}
+                        alt={getAttachmentLabel(item)}
+                        class="block max-h-64 max-w-xs rounded object-contain"
+                      />
+                    </Show>
+                  </AttachmentHoverCardContent>
+                </AttachmentHoverCard>
+              </Show>
+              <AttachmentRemove />
+            </Attachment>
+          )}
+        </For>
+      </Attachments>
+    </Show>
+  );
+});

package/src/elements/chain-of-thought.tsx

@@ -0,0 +1,45 @@
+import { For, Show } from 'solid-js';
+import { defineKitnElement } from './define';
+import {
+  ChainOfThought,
+  ChainOfThoughtStep,
+  ChainOfThoughtTrigger,
+  ChainOfThoughtContent,
+  ChainOfThoughtItem,
+} from '../components/chain-of-thought';
+
+interface Step {
+  /** The step's heading (the always-visible trigger). */
+  label: string;
+  /** Optional expandable detail. */
+  content?: string;
+}
+
+interface Props extends Record<string, unknown> {
+  /** The reasoning steps. Set as a JS property. Compound sub-parts collapse to
+   *  this one data model (Route 1). */
+  steps: Step[];
+}
+
+/**
+ * `<kitn-chain-of-thought>` — step-by-step reasoning with connectors and
+ * per-step collapsible detail. Data via the `steps` property.
+ */
+defineKitnElement<Props>('kitn-chain-of-thought', {
+  steps: [],
+}, (props) => (
+  <ChainOfThought>
+    <For each={props.steps}>
+      {(step, i) => (
+        <ChainOfThoughtStep isLast={i() === props.steps.length - 1}>
+          <ChainOfThoughtTrigger>{step.label}</ChainOfThoughtTrigger>
+          <Show when={step.content}>
+            <ChainOfThoughtContent>
+              <ChainOfThoughtItem>{step.content}</ChainOfThoughtItem>
+            </ChainOfThoughtContent>
+          </Show>
+        </ChainOfThoughtStep>
+      )}
+    </For>
+  </ChainOfThought>
+));

package/src/elements/chat-scope-picker.tsx

@@ -0,0 +1,36 @@
+import { defineKitnElement } from './define';
+import { ChatScopePicker } from '../components/chat-scope-picker';
+import type { SearchFilters } from '../types';
+
+interface Props extends Record<string, unknown> {
+  /** Authors to offer as scope filters. Set as a JS property. */
+  availableAuthors: string[];
+  /** Tags to offer as scope filters. Set as a JS property. */
+  availableTags: string[];
+  /** The label shown on the trigger for the active scope. */
+  currentLabel?: string;
+}
+
+/** Events fired by `<kitn-chat-scope-picker>`. */
+interface Events {
+  /** A scope was chosen (`undefined` filters = "All Content"). */
+  scopechange: { filters: SearchFilters | undefined };
+}
+
+/**
+ * `<kitn-chat-scope-picker>` — a dropdown to scope a chat by author or tag.
+ * Options via `available-authors`/`available-tags` properties; emits
+ * `scopechange`.
+ */
+defineKitnElement<Props, Events>('kitn-chat-scope-picker', {
+  availableAuthors: [],
+  availableTags: [],
+  currentLabel: 'All Content',
+}, (props, { dispatch }) => (
+  <ChatScopePicker
+    currentLabel={props.currentLabel ?? 'All Content'}
+    availableAuthors={props.availableAuthors}
+    availableTags={props.availableTags}
+    onScopeChange={(filters) => dispatch('scopechange', { filters })}
+  />
+));

package/src/elements/chat-workspace.tsx

@@ -0,0 +1,122 @@
+import { createSignal, Show } from 'solid-js';
+import { defineKitnElement } from './define';
+import { ChatThread, type ChatThreadContextUsage } from '../components/chat-thread';
+import { ConversationList } from '../components/conversation-list';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '../ui/resizable';
+import { Button } from '../ui/button';
+import { PanelLeftOpen } from 'lucide-solid';
+import type { SlashCommandItem } from '../components/slash-command';
+import type { ChatMessage } from './chat-types';
+import type { ProseSize } from '../primitives/chat-config';
+import type { ModelOption, ConversationGroup, ConversationSummary } from '../types';
+
+interface Props extends Record<string, unknown> {
+  /** Pre-bucketed conversation groups for the sidebar. Set as a JS property. */
+  groups: ConversationGroup[];
+  /** Flat conversation list (auto-bucketed if `groups` is empty). Set as a JS property. */
+  conversations: ConversationSummary[];
+  /** Id of the open conversation, highlighted in the sidebar. */
+  activeId?: string;
+  /** The active conversation's message thread, newest last. Set as a JS property. */
+  messages: ChatMessage[];
+  value?: string;
+  placeholder?: string;
+  loading?: boolean;
+  suggestions?: string[];
+  suggestionMode?: 'submit' | 'fill';
+  proseSize?: ProseSize;
+  codeTheme?: string;
+  codeHighlight?: boolean;
+  chatTitle?: string;
+  models?: ModelOption[];
+  currentModel?: string;
+  context?: ChatThreadContextUsage;
+  scrollButton?: boolean;
+  search?: boolean;
+  voice?: boolean;
+  slashCommands?: SlashCommandItem[];
+  slashActiveIds?: string[];
+  slashCompact?: boolean;
+  /** Sidebar default width as a percent of the workspace (default 22). */
+  sidebarWidth?: number;
+  /** Sidebar min width in px (default 200). */
+  sidebarMinWidth?: number;
+  /** Sidebar max width in px (default 420). */
+  sidebarMaxWidth?: number;
+  /** Initial collapsed state of the sidebar (default false). */
+  sidebarCollapsed?: boolean;
+}
+
+defineKitnElement<Props>('kitn-chat-workspace', {
+  groups: [], conversations: [], activeId: undefined, messages: [],
+  value: undefined, placeholder: 'Send a message...', loading: false,
+  suggestions: undefined, suggestionMode: 'submit', proseSize: 'sm',
+  codeTheme: 'github-dark-dimmed', codeHighlight: true, chatTitle: undefined,
+  models: undefined, currentModel: undefined, context: undefined, scrollButton: true,
+  search: false, voice: false, slashCommands: undefined, slashActiveIds: undefined, slashCompact: false,
+  sidebarWidth: 22, sidebarMinWidth: 200, sidebarMaxWidth: 420, sidebarCollapsed: false,
+}, (props, { dispatch, flag }) => {
+  // Collapse is internal UI state; `sidebarCollapsed` only sets the initial value
+  // (not a controlled binding).
+  const [collapsed, setCollapsed] = createSignal(props.sidebarCollapsed === true);
+  const toggle = () => { const next = !collapsed(); setCollapsed(next); dispatch('sidebartoggle', { collapsed: next }); };
+
+  // Create the thread ONCE and reference the same node in both <Show> branches.
+  // It's owned by this component root (not by a Show branch), so toggling the
+  // sidebar moves the node between branches without disposing it — the thread's
+  // own state (e.g. an uncontrolled draft) survives the collapse/expand.
+  const threadEl = (
+    <ChatThread
+      messages={props.messages} value={props.value as string | undefined} placeholder={props.placeholder as string}
+      loading={flag('loading')} suggestions={props.suggestions as string[] | undefined}
+      suggestionMode={props.suggestionMode as 'submit' | 'fill'} proseSize={props.proseSize as ProseSize}
+      codeTheme={props.codeTheme as string} codeHighlight={flag('codeHighlight')}
+      chatTitle={props.chatTitle as string | undefined} models={props.models as ModelOption[] | undefined}
+      currentModel={props.currentModel as string | undefined} context={props.context as ChatThreadContextUsage | undefined}
+      scrollButton={props.scrollButton !== false} search={flag('search')} voice={flag('voice')}
+      slashCommands={props.slashCommands as SlashCommandItem[] | undefined}
+      slashActiveIds={props.slashActiveIds as string[] | undefined} slashCompact={flag('slashCompact')}
+      onValueChange={(value) => dispatch('valuechange', { value })}
+      onSubmit={(detail) => dispatch('submit', detail)}
+      onSuggestionClick={(value) => dispatch('suggestionclick', { value })}
+      onModelChange={(modelId) => dispatch('modelchange', { modelId })}
+      onMessageAction={(detail) => dispatch('messageaction', detail)}
+      onSearch={() => dispatch('search', {})}
+      onVoice={() => dispatch('voice', {})}
+      onSlashSelect={(command) => dispatch('slashselect', { command })}
+    />
+  );
+
+  return (
+    <div class="h-full w-full overflow-hidden bg-background">
+      <Show
+        when={!collapsed()}
+        fallback={
+          <div class="relative h-full">
+            <Button
+              variant="ghost" size="icon-sm" aria-label="Open sidebar"
+              class="absolute left-2 top-2 z-10 rounded-full bg-card/80 shadow-sm backdrop-blur"
+              onClick={toggle}
+            >
+              <PanelLeftOpen class="size-4" />
+            </Button>
+            {threadEl}
+          </div>
+        }
+      >
+        <ResizablePanelGroup orientation="horizontal">
+          <ResizablePanel defaultSize={props.sidebarWidth as number} data-min-size={String(props.sidebarMinWidth)} data-max-size={String(props.sidebarMaxWidth)}>
+            <ConversationList
+              groups={props.groups} conversations={props.conversations} activeId={props.activeId as string | undefined}
+              onSelect={(id) => dispatch('conversationselect', { id })}
+              onNewChat={() => dispatch('newchat', {})}
+              onToggleSidebar={toggle}
+            />
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel>{threadEl}</ResizablePanel>
+        </ResizablePanelGroup>
+      </Show>
+    </div>
+  );
+});