@dataverse-kit/agent-kit 0.2.0 → 0.2.1

package/dist/index.d.cts

@@ -94,19 +94,26 @@ interface ComposerProps {
     maxLength?: number;
     /** 'enter' sends on Enter; 'mod+enter' needs Ctrl/Cmd. */
     sendOn?: 'enter' | 'mod+enter';
-    /** Rendered left of the send button — attachments, formatting, etc. */
+    /** Rendered inside the box, left of the send button — attachments, formatting, emoji. */
     toolbar?: React$1.ReactNode;
 }
 /**
- * The send box.
+ * The send box, shaped like the Teams composer: one rounded container holding a borderless
+ * field, the host's affordances, and the send button behind a divider.
  *
  * ★ `sendOn` is configurable, and defaults to Enter only because that is what users expect
  *   from Teams. Enter-to-send in a multiline field is hostile to dictation and voice control,
- *   and Shift+Enter is undiscoverable — hence the `aria-describedby` hint, which makes the
- *   contract audible instead of folklore.
+ *   and Shift+Enter is undiscoverable — hence the `aria-describedby` hint. The hint is
+ *   VISUALLY HIDDEN, not removed: Teams does not print it, but a screen-reader user has no
+ *   other way to learn the contract.
+ *
+ * ★ Growth is by HARD NEWLINE only, to `MAX_ROWS`, then the field scrolls. It does not grow on
+ *   soft wrap — that needs measurement, and a ResizeObserver here would be untestable in jsdom
+ *   (a stubbed one never fires). Stated rather than implied, because Teams does grow on wrap.
  *
  * ★ Deliberately NOT Fluent's `Toolbar` for the affordance row: it reaches
  *   `useArrowNavigationGroup`. Consumers pass plain buttons, or the in-tree ActionToolbar.
+ *   The kit ships no emoji/GIF/format pickers — those are host concerns; `toolbar` is the slot.
  */
 declare function Composer(props: ComposerProps): React$1.ReactElement;
 
@@ -114,10 +121,16 @@ interface SuggestedPromptsProps {
     prompts: readonly string[];
     onPick: (prompt: string) => void;
     heading?: string;
+    /**
+     * Row alignment. Defaults to `'start'`, which is right above a composer where the chips read as
+     * a continuation of the transcript. `'center'` is for a centred zero state — see
+     * `EmptyConversation`, where left-packed chips under a centred heading looked like a defect.
+     */
+    align?: 'start' | 'center';
 }
 /** ★ Plain Buttons in a labelled list, not Fluent's `TagGroup` — `react-tags` reaches
  *  `useArrowNavigationGroup`, and chips gain nothing from it here. */
-declare function SuggestedPrompts({ prompts, onPick, heading, }: SuggestedPromptsProps): React$1.ReactElement | null;
+declare function SuggestedPrompts({ prompts, onPick, heading, align, }: SuggestedPromptsProps): React$1.ReactElement | null;
 
 interface EmptyConversationProps {
     title?: string;

package/dist/index.d.ts

@@ -94,19 +94,26 @@ interface ComposerProps {
     maxLength?: number;
     /** 'enter' sends on Enter; 'mod+enter' needs Ctrl/Cmd. */
     sendOn?: 'enter' | 'mod+enter';
-    /** Rendered left of the send button — attachments, formatting, etc. */
+    /** Rendered inside the box, left of the send button — attachments, formatting, emoji. */
     toolbar?: React$1.ReactNode;
 }
 /**
- * The send box.
+ * The send box, shaped like the Teams composer: one rounded container holding a borderless
+ * field, the host's affordances, and the send button behind a divider.
  *
  * ★ `sendOn` is configurable, and defaults to Enter only because that is what users expect
  *   from Teams. Enter-to-send in a multiline field is hostile to dictation and voice control,
- *   and Shift+Enter is undiscoverable — hence the `aria-describedby` hint, which makes the
- *   contract audible instead of folklore.
+ *   and Shift+Enter is undiscoverable — hence the `aria-describedby` hint. The hint is
+ *   VISUALLY HIDDEN, not removed: Teams does not print it, but a screen-reader user has no
+ *   other way to learn the contract.
+ *
+ * ★ Growth is by HARD NEWLINE only, to `MAX_ROWS`, then the field scrolls. It does not grow on
+ *   soft wrap — that needs measurement, and a ResizeObserver here would be untestable in jsdom
+ *   (a stubbed one never fires). Stated rather than implied, because Teams does grow on wrap.
  *
  * ★ Deliberately NOT Fluent's `Toolbar` for the affordance row: it reaches
  *   `useArrowNavigationGroup`. Consumers pass plain buttons, or the in-tree ActionToolbar.
+ *   The kit ships no emoji/GIF/format pickers — those are host concerns; `toolbar` is the slot.
  */
 declare function Composer(props: ComposerProps): React$1.ReactElement;
 
@@ -114,10 +121,16 @@ interface SuggestedPromptsProps {
     prompts: readonly string[];
     onPick: (prompt: string) => void;
     heading?: string;
+    /**
+     * Row alignment. Defaults to `'start'`, which is right above a composer where the chips read as
+     * a continuation of the transcript. `'center'` is for a centred zero state — see
+     * `EmptyConversation`, where left-packed chips under a centred heading looked like a defect.
+     */
+    align?: 'start' | 'center';
 }
 /** ★ Plain Buttons in a labelled list, not Fluent's `TagGroup` — `react-tags` reaches
  *  `useArrowNavigationGroup`, and chips gain nothing from it here. */
-declare function SuggestedPrompts({ prompts, onPick, heading, }: SuggestedPromptsProps): React$1.ReactElement | null;
+declare function SuggestedPrompts({ prompts, onPick, heading, align, }: SuggestedPromptsProps): React$1.ReactElement | null;
 
 interface EmptyConversationProps {
     title?: string;

package/dist/index.mjs

@@ -1190,19 +1190,76 @@ function MessageList(props) {
 
 // src/conversation/Composer.tsx
 import * as React11 from "react";
-import { Button as Button4, Textarea, makeStyles as makeStyles11, tokens as tokens10, Tooltip as Tooltip2 } from "@fluentui/react-components";
+import { Button as Button4, Textarea, makeStyles as makeStyles11, mergeClasses as mergeClasses5, tokens as tokens10, Tooltip as Tooltip2 } from "@fluentui/react-components";
 import { SendRegular, StopRegular } from "@fluentui/react-icons";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var MAX_ROWS = 6;
 var useStyles10 = makeStyles11({
-  root: {
-    display: "flex",
-    gap: tokens10.spacingHorizontalS,
-    alignItems: "flex-end",
+  wrapper: {
     padding: tokens10.spacingVerticalS,
     borderTop: `1px solid ${tokens10.colorNeutralStroke2}`
   },
-  input: { flex: 1 },
-  hint: { fontSize: tokens10.fontSizeBase100, color: tokens10.colorNeutralForeground3 }
+  // The Teams send box: ONE rounded container holding the field and the affordances.
+  box: {
+    display: "flex",
+    alignItems: "flex-end",
+    gap: tokens10.spacingHorizontalXXS,
+    paddingLeft: tokens10.spacingHorizontalS,
+    paddingRight: tokens10.spacingHorizontalXXS,
+    paddingTop: tokens10.spacingVerticalXXS,
+    paddingBottom: tokens10.spacingVerticalXXS,
+    borderRadius: tokens10.borderRadiusXLarge,
+    border: `1px solid ${tokens10.colorNeutralStroke1}`,
+    backgroundColor: tokens10.colorNeutralBackground1,
+    // ★ The ring moves to the CONTAINER because the field's own indicator is suppressed below.
+    //   It is an `outline`, not a box-shadow, so forced-colors still paints it (a11y rule 5).
+    ":focus-within": {
+      border: `1px solid ${tokens10.colorCompoundBrandStroke}`,
+      outline: `2px solid ${tokens10.colorCompoundBrandStroke}`,
+      outlineOffset: "-1px"
+    }
+  },
+  boxDisabled: {
+    backgroundColor: tokens10.colorNeutralBackgroundDisabled,
+    border: `1px solid ${tokens10.colorNeutralStrokeDisabled}`
+  },
+  // Fluent's Textarea has no transparent appearance, so its chrome is removed here and the
+  // container above supplies it. `::after` is Fluent's focus underline.
+  field: {
+    flexGrow: 1,
+    minWidth: 0,
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: 0,
+    "::after": { display: "none" }
+  },
+  fieldInner: {
+    backgroundColor: "transparent",
+    // ★ Fluent's Textarea ships `min-height: 52px` (measured). The affordance buttons are 32px,
+    //   so the default left the placeholder on one line and the icons on another — the single
+    //   visible difference from the Teams reference. Matching the button height puts them on
+    //   one baseline; growth past one row is then driven by `rows`, up to maxHeight.
+    minHeight: "32px",
+    maxHeight: "160px",
+    paddingLeft: 0,
+    paddingRight: 0
+  },
+  actions: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens10.spacingHorizontalXXS
+    // ★ No extra bottom padding: `alignItems: flex-end` on the box already pins this row to the
+    //   field's last line, and padding on top of it pushed the send glyph visibly below the
+    //   baseline on a single-row box (measured against the Teams reference).
+  },
+  divider: {
+    width: "1px",
+    alignSelf: "center",
+    height: "20px",
+    marginLeft: tokens10.spacingHorizontalXXS,
+    marginRight: tokens10.spacingHorizontalXXS,
+    backgroundColor: tokens10.colorNeutralStroke2
+  }
 });
 function Composer(props) {
   const {
@@ -1218,6 +1275,7 @@ function Composer(props) {
     toolbar
   } = props;
   const styles = useStyles10();
+  const vh = useVisuallyHiddenStyles();
   const hintId = React11.useId();
   const submit = () => {
     const text = value.trim();
@@ -1232,56 +1290,77 @@ function Composer(props) {
     submit();
   };
   const hint = sendOn === "enter" ? "Press Enter to send, Shift plus Enter for a new line." : "Press Control or Command plus Enter to send.";
-  return /* @__PURE__ */ jsxs9("div", { className: styles.root, children: [
-    /* @__PURE__ */ jsxs9("div", { className: styles.input, children: [
+  const rows = Math.min(MAX_ROWS, Math.max(1, value.split("\n").length));
+  return /* @__PURE__ */ jsxs9("div", { className: styles.wrapper, children: [
+    /* @__PURE__ */ jsxs9("div", { className: mergeClasses5(styles.box, disabled && styles.boxDisabled), children: [
       /* @__PURE__ */ jsx12(
         Textarea,
         {
+          className: styles.field,
           value,
           onChange: (_, data) => onChange(data.value),
           onKeyDown,
           placeholder,
           disabled,
           maxLength,
-          resize: "vertical",
+          resize: "none",
+          appearance: "outline",
           "aria-label": placeholder,
           "aria-describedby": hintId,
-          textarea: { "aria-multiline": true }
+          textarea: { "aria-multiline": true, rows, className: styles.fieldInner }
         }
       ),
-      /* @__PURE__ */ jsx12("span", { id: hintId, className: styles.hint, children: hint })
+      /* @__PURE__ */ jsxs9("div", { className: styles.actions, children: [
+        toolbar,
+        toolbar ? /* @__PURE__ */ jsx12("span", { className: styles.divider, "aria-hidden": "true" }) : null,
+        busy && onStop ? /* @__PURE__ */ jsx12(Tooltip2, { content: "Stop generating", relationship: "label", withArrow: true, children: /* @__PURE__ */ jsx12(Button4, { appearance: "subtle", icon: /* @__PURE__ */ jsx12(StopRegular, {}), onClick: onStop }) }) : /* @__PURE__ */ jsx12(Tooltip2, { content: "Send", relationship: "label", withArrow: true, children: /* @__PURE__ */ jsx12(
+          Button4,
+          {
+            appearance: "subtle",
+            icon: /* @__PURE__ */ jsx12(SendRegular, {}),
+            onClick: submit,
+            disabled: !value.trim() || busy || disabled
+          }
+        ) })
+      ] })
     ] }),
-    toolbar,
-    busy && onStop ? /* @__PURE__ */ jsx12(Tooltip2, { content: "Stop generating", relationship: "label", withArrow: true, children: /* @__PURE__ */ jsx12(Button4, { appearance: "secondary", icon: /* @__PURE__ */ jsx12(StopRegular, {}), onClick: onStop }) }) : /* @__PURE__ */ jsx12(Tooltip2, { content: "Send", relationship: "label", withArrow: true, children: /* @__PURE__ */ jsx12(
-      Button4,
-      {
-        appearance: "primary",
-        icon: /* @__PURE__ */ jsx12(SendRegular, {}),
-        onClick: submit,
-        disabled: !value.trim() || busy || disabled
-      }
-    ) })
+    /* @__PURE__ */ jsx12("span", { id: hintId, className: vh.root, children: hint })
   ] });
 }
 
 // src/conversation/SuggestedPrompts.tsx
-import { Button as Button5, makeStyles as makeStyles12, tokens as tokens11 } from "@fluentui/react-components";
+import { Button as Button5, makeStyles as makeStyles12, mergeClasses as mergeClasses6, tokens as tokens11 } from "@fluentui/react-components";
 import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var useStyles11 = makeStyles12({
   root: { display: "flex", flexWrap: "wrap", gap: tokens11.spacingHorizontalXS, padding: tokens11.spacingVerticalXS },
+  // ★ The heading is `width: 100%`, so it takes the PARENT's text-align while the chips take the
+  //   flex row's justification. That split is why the label could look centred while the chips
+  //   stayed left-packed — the two are aligned by different mechanisms and must both be set.
+  center: { justifyContent: "center" },
+  headingCenter: { textAlign: "center" },
   heading: { width: "100%", fontSize: tokens11.fontSizeBase200, color: tokens11.colorNeutralForeground3 }
 });
 function SuggestedPrompts({
   prompts,
   onPick,
-  heading = "Suggested follow-ups"
+  heading = "Suggested follow-ups",
+  align = "start"
 }) {
   const styles = useStyles11();
   if (prompts.length === 0) return null;
-  return /* @__PURE__ */ jsxs10("div", { className: styles.root, role: "group", "aria-label": heading, children: [
-    /* @__PURE__ */ jsx13("span", { className: styles.heading, children: heading }),
-    prompts.map((prompt) => /* @__PURE__ */ jsx13(Button5, { size: "small", appearance: "outline", onClick: () => onPick(prompt), children: prompt }, prompt))
-  ] });
+  const centered = align === "center";
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: mergeClasses6(styles.root, centered && styles.center),
+      role: "group",
+      "aria-label": heading,
+      children: [
+        /* @__PURE__ */ jsx13("span", { className: mergeClasses6(styles.heading, centered && styles.headingCenter), children: heading }),
+        prompts.map((prompt) => /* @__PURE__ */ jsx13(Button5, { size: "small", appearance: "outline", onClick: () => onPick(prompt), children: prompt }, prompt))
+      ]
+    }
+  );
 }
 
 // src/conversation/EmptyConversation.tsx
@@ -1310,7 +1389,7 @@ function EmptyConversation({
   return /* @__PURE__ */ jsxs11("div", { className: styles.root, children: [
     /* @__PURE__ */ jsx14(Text2, { as: "h2", size: 500, weight: "semibold", children: title }),
     /* @__PURE__ */ jsx14(Text2, { children: description }),
-    onPick && prompts.length > 0 ? /* @__PURE__ */ jsx14(SuggestedPrompts, { prompts, onPick, heading: "Try one of these" }) : null
+    onPick && prompts.length > 0 ? /* @__PURE__ */ jsx14(SuggestedPrompts, { prompts, onPick, heading: "Try one of these", align: "center" }) : null
   ] });
 }
 
@@ -1760,7 +1839,7 @@ import {
   MenuItem,
   Tooltip as Tooltip4,
   makeStyles as makeStyles19,
-  mergeClasses as mergeClasses5,
+  mergeClasses as mergeClasses7,
   tokens as tokens18
 } from "@fluentui/react-components";
 import { MoreHorizontalRegular } from "@fluentui/react-icons";
@@ -1807,7 +1886,7 @@ function AppRail(props) {
       {
         appearance: "subtle",
         icon: item.icon,
-        className: mergeClasses5(styles.button, item.id === selectedId && styles.selected),
+        className: mergeClasses7(styles.button, item.id === selectedId && styles.selected),
         "aria-pressed": item.id === selectedId,
         "aria-label": item.badgeCount ? `${item.label}, ${item.badgeCount} unread` : item.label,
         onClick: () => onSelect(item.id),
@@ -1836,7 +1915,7 @@ import * as React15 from "react";
 import { makeStyles as makeStyles21, tokens as tokens20, Text as Text6 } from "@fluentui/react-components";
 
 // src/shell/ConversationListItem.tsx
-import { makeStyles as makeStyles20, mergeClasses as mergeClasses6, tokens as tokens19 } from "@fluentui/react-components";
+import { makeStyles as makeStyles20, mergeClasses as mergeClasses8, tokens as tokens19 } from "@fluentui/react-components";
 
 // src/shell/AgentAvatar.tsx
 import { Avatar as Avatar2 } from "@fluentui/react-components";
@@ -1935,13 +2014,13 @@ function ConversationListItem(props) {
       role: "option",
       "aria-selected": selected,
       "aria-label": conversationAccessibleName(summary, locale),
-      className: mergeClasses6(styles.row, selected && styles.selected, active && styles.active),
+      className: mergeClasses8(styles.row, selected && styles.selected, active && styles.active),
       onClick: () => onSelect(summary.id),
       "data-conversation-option": true,
       children: [
         /* @__PURE__ */ jsx28(AgentAvatar, { participant: summary.participant, presence: summary.presence, size: 32 }),
         /* @__PURE__ */ jsxs21("div", { className: styles.body, "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx28("span", { className: mergeClasses6(styles.title, summary.muted && styles.muted), children: summary.title }),
+          /* @__PURE__ */ jsx28("span", { className: mergeClasses8(styles.title, summary.muted && styles.muted), children: summary.title }),
           summary.preview ? /* @__PURE__ */ jsx28("span", { className: styles.preview, children: summary.preview }) : null
         ] }),
         /* @__PURE__ */ jsxs21("div", { className: styles.meta, "aria-hidden": "true", children: [