@dataverse-kit/agent-kit 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -1315,16 +1315,73 @@ var React11 = __toESM(require("react"), 1);
 var import_react_components11 = require("@fluentui/react-components");
 var import_react_icons4 = require("@fluentui/react-icons");
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var MAX_ROWS = 6;
 var useStyles10 = (0, import_react_components11.makeStyles)({
-  root: {
-    display: "flex",
-    gap: import_react_components11.tokens.spacingHorizontalS,
-    alignItems: "flex-end",
+  wrapper: {
     padding: import_react_components11.tokens.spacingVerticalS,
     borderTop: `1px solid ${import_react_components11.tokens.colorNeutralStroke2}`
   },
-  input: { flex: 1 },
-  hint: { fontSize: import_react_components11.tokens.fontSizeBase100, color: import_react_components11.tokens.colorNeutralForeground3 }
+  // The Teams send box: ONE rounded container holding the field and the affordances.
+  box: {
+    display: "flex",
+    alignItems: "flex-end",
+    gap: import_react_components11.tokens.spacingHorizontalXXS,
+    paddingLeft: import_react_components11.tokens.spacingHorizontalS,
+    paddingRight: import_react_components11.tokens.spacingHorizontalXXS,
+    paddingTop: import_react_components11.tokens.spacingVerticalXXS,
+    paddingBottom: import_react_components11.tokens.spacingVerticalXXS,
+    borderRadius: import_react_components11.tokens.borderRadiusXLarge,
+    border: `1px solid ${import_react_components11.tokens.colorNeutralStroke1}`,
+    backgroundColor: import_react_components11.tokens.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 ${import_react_components11.tokens.colorCompoundBrandStroke}`,
+      outline: `2px solid ${import_react_components11.tokens.colorCompoundBrandStroke}`,
+      outlineOffset: "-1px"
+    }
+  },
+  boxDisabled: {
+    backgroundColor: import_react_components11.tokens.colorNeutralBackgroundDisabled,
+    border: `1px solid ${import_react_components11.tokens.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: import_react_components11.tokens.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: import_react_components11.tokens.spacingHorizontalXXS,
+    marginRight: import_react_components11.tokens.spacingHorizontalXXS,
+    backgroundColor: import_react_components11.tokens.colorNeutralStroke2
+  }
 });
 function Composer(props) {
   const {
@@ -1340,6 +1397,7 @@ function Composer(props) {
     toolbar
   } = props;
   const styles = useStyles10();
+  const vh = useVisuallyHiddenStyles();
   const hintId = React11.useId();
   const submit = () => {
     const text = value.trim();
@@ -1354,35 +1412,41 @@ 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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: styles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: styles.input, children: [
+  const rows = Math.min(MAX_ROWS, Math.max(1, value.split("\n").length));
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: styles.wrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_react_components11.mergeClasses)(styles.box, disabled && styles.boxDisabled), children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_react_components11.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__ */ (0, import_jsx_runtime12.jsx)("span", { id: hintId, className: styles.hint, children: hint })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: styles.actions, children: [
+        toolbar,
+        toolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: styles.divider, "aria-hidden": "true" }) : null,
+        busy && onStop ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components11.Tooltip, { content: "Stop generating", relationship: "label", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components11.Button, { appearance: "subtle", icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_icons4.StopRegular, {}), onClick: onStop }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components11.Tooltip, { content: "Send", relationship: "label", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_react_components11.Button,
+          {
+            appearance: "subtle",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_icons4.SendRegular, {}),
+            onClick: submit,
+            disabled: !value.trim() || busy || disabled
+          }
+        ) })
+      ] })
     ] }),
-    toolbar,
-    busy && onStop ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components11.Tooltip, { content: "Stop generating", relationship: "label", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components11.Button, { appearance: "secondary", icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_icons4.StopRegular, {}), onClick: onStop }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components11.Tooltip, { content: "Send", relationship: "label", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_components11.Button,
-      {
-        appearance: "primary",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_icons4.SendRegular, {}),
-        onClick: submit,
-        disabled: !value.trim() || busy || disabled
-      }
-    ) })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id: hintId, className: vh.root, children: hint })
   ] });
 }
 
@@ -1391,19 +1455,34 @@ var import_react_components12 = require("@fluentui/react-components");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var useStyles11 = (0, import_react_components12.makeStyles)({
   root: { display: "flex", flexWrap: "wrap", gap: import_react_components12.tokens.spacingHorizontalXS, padding: import_react_components12.tokens.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: import_react_components12.tokens.fontSizeBase200, color: import_react_components12.tokens.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__ */ (0, import_jsx_runtime13.jsxs)("div", { className: styles.root, role: "group", "aria-label": heading, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: styles.heading, children: heading }),
-    prompts.map((prompt) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components12.Button, { size: "small", appearance: "outline", onClick: () => onPick(prompt), children: prompt }, prompt))
-  ] });
+  const centered = align === "center";
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: (0, import_react_components12.mergeClasses)(styles.root, centered && styles.center),
+      role: "group",
+      "aria-label": heading,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: (0, import_react_components12.mergeClasses)(styles.heading, centered && styles.headingCenter), children: heading }),
+        prompts.map((prompt) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components12.Button, { size: "small", appearance: "outline", onClick: () => onPick(prompt), children: prompt }, prompt))
+      ]
+    }
+  );
 }
 
 // src/conversation/EmptyConversation.tsx
@@ -1432,7 +1511,7 @@ function EmptyConversation({
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: styles.root, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components13.Text, { as: "h2", size: 500, weight: "semibold", children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components13.Text, { children: description }),
-    onPick && prompts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SuggestedPrompts, { prompts, onPick, heading: "Try one of these" }) : null
+    onPick && prompts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SuggestedPrompts, { prompts, onPick, heading: "Try one of these", align: "center" }) : null
   ] });
 }