@fluentui-copilot/react-prompt-starter 0.9.4 → 0.10.1

package/CHANGELOG.json

@@ -2,7 +2,55 @@
   "name": "@fluentui-copilot/react-prompt-starter",
   "entries": [
     {
-      "date": "Mon, 19 May 2025 18:03:24 GMT",
+      "date": "Tue, 24 Jun 2025 22:20:58 GMT",
+      "tag": "@fluentui-copilot/react-prompt-starter_v0.10.1",
+      "version": "0.10.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "485ea952bff02c151ee8ad54af79cf5cebb3975f",
+            "comment": "feat: Add exit fade when collapsing PromptStarterList"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 12 Jun 2025 17:50:58 GMT",
+      "tag": "@fluentui-copilot/react-prompt-starter_v0.10.0",
+      "version": "0.10.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "d9945da4ae81c3a928550551238dc5b98d99078d",
+            "comment": "feat: Add reflow to PromptStarterV2 single column appearance."
+          },
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "3b0d585a760015b5fda7fb09b0fe17d965986c44",
+            "comment": "feat: Add motion to PromptStarterV2 within PromptStarterList."
+          },
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "f88e520cd18013d1c10bbb826d7f121c39117f1b",
+            "comment": "feat: Create `PromptStarterV2` component."
+          },
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-prompt-starter",
+            "commit": "1ebd4b30e170c9b6d335bb4f461ac6e99918453f",
+            "comment": "feat: Implement PromptStarterList component."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 19 May 2025 18:04:28 GMT",
       "tag": "@fluentui-copilot/react-prompt-starter_v0.9.4",
       "version": "0.9.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui-copilot/react-prompt-starter
 
-This log was last generated on Mon, 19 May 2025 18:03:24 GMT and should not be manually modified.
+This log was last generated on Tue, 24 Jun 2025 22:20:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.10.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.10.1)
+
+Tue, 24 Jun 2025 22:20:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.10.0..@fluentui-copilot/react-prompt-starter_v0.10.1)
+
+### Patches
+
+- feat: Add exit fade when collapsing PromptStarterList ([PR #3137](https://github.com/microsoft/fluentai/pull/3137) by jiangemma@microsoft.com)
+
+## [0.10.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.10.0)
+
+Thu, 12 Jun 2025 17:50:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.9.4..@fluentui-copilot/react-prompt-starter_v0.10.0)
+
+### Patches
+
+- feat: Add reflow to PromptStarterV2 single column appearance. ([PR #3131](https://github.com/microsoft/fluentai/pull/3131) by jiangemma@microsoft.com)
+- feat: Add motion to PromptStarterV2 within PromptStarterList. ([PR #3129](https://github.com/microsoft/fluentai/pull/3129) by jiangemma@microsoft.com)
+- feat: Create `PromptStarterV2` component. ([PR #3103](https://github.com/microsoft/fluentai/pull/3103) by jiangemma@microsoft.com)
+- feat: Implement PromptStarterList component. ([PR #3112](https://github.com/microsoft/fluentai/pull/3112) by jiangemma@microsoft.com)
+
 ## [0.9.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-starter_v0.9.4)
 
-Mon, 19 May 2025 18:03:24 GMT 
+Mon, 19 May 2025 18:04:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-starter_v0.9.3..@fluentui-copilot/react-prompt-starter_v0.9.4)
 
 ### Patches

package/dist/index.d.ts

@@ -1,15 +1,63 @@
 import type { BadgeProps } from '@fluentui/react-components';
+import type { Button } from '@fluentui/react-components';
 import type { ComponentProps } from '@fluentui/react-components';
 import type { ComponentState } from '@fluentui/react-components';
 import type { DesignVersion } from '@fluentui-copilot/react-provider';
 import type { ForwardRefComponent } from '@fluentui/react-components';
+import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-components';
 import type { SlotClassNames } from '@fluentui/react-components';
+import type { UseArrowNavigationGroupOptions } from '@fluentui/react-components';
 
 export declare const PromptStarter: ForwardRefComponent<PromptStarterProps>;
 
 export declare const promptStarterClassNames: SlotClassNames<PromptStarterSlots>;
 
+export declare const PromptStarterList: ForwardRefComponent<PromptStarterListProps>;
+
+export declare const promptStarterListClassNames: SlotClassNames<PromptStarterListSlots>;
+
+declare type PromptStarterListContextValue = Pick<PromptStarterListState, 'numberOfColumns' | 'isExpanded'>;
+
+/**
+ * PromptStarterList Props
+ */
+export declare type PromptStarterListProps = ComponentProps<PromptStarterListSlots> & DesignVersion & {
+    /**
+     * Text for the expand button when the list is collapsed.
+     *
+     * default: "Show more"
+     */
+    expandButtonLabel?: string;
+    /**
+     * Text for the expand button when the list is expanded.
+     *
+     * default: "Show less"
+     */
+    collapseButtonLabel?: string;
+    /**
+     * Arrow navigation options. This can be used to customize Tabster's direction,
+     * tab behavior, and memoization options.
+     *
+     * default: {  axis: 'horizontal', memorizeCurrent: true }
+     */
+    arrowNavigationOptions?: UseArrowNavigationGroupOptions;
+};
+
+export declare type PromptStarterListSlots = {
+    root: NonNullable<Slot<'div'>>;
+    gridWrapper: NonNullable<Slot<'div'>>;
+    expandButton?: Slot<typeof Button>;
+};
+
+/**
+ * State used in rendering PromptStarterList
+ */
+export declare type PromptStarterListState = ComponentState<PromptStarterListSlots> & Required<Pick<PromptStarterListProps, 'designVersion'>> & {
+    numberOfColumns: number;
+    isExpanded?: boolean;
+};
+
 /**
  * PromptStarter Props
  */
@@ -28,8 +76,40 @@ export declare type PromptStarterSlots = {
  */
 export declare type PromptStarterState = ComponentState<PromptStarterSlots> & Pick<Required<PromptStarterProps>, 'designVersion'>;
 
+export declare const PromptStarterV2: ForwardRefComponent<PromptStarterV2Props>;
+
+export declare const promptStarterV2ClassNames: SlotClassNames<PromptStarterV2Slots>;
+
+/**
+ * PromptStarter Props
+ */
+export declare type PromptStarterV2Props = Omit<ComponentProps<PromptStarterV2Slots>, 'disabled'>;
+
+export declare type PromptStarterV2Slots = {
+    root: NonNullable<Slot<'div'>>;
+    primaryAction: NonNullable<Slot<'button'>>;
+    icon: NonNullable<Slot<'span'>>;
+    prompt: NonNullable<Slot<'span'>>;
+    reasonMarker?: Slot<'span'>;
+    actions?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering PromptStarter
+ */
+export declare type PromptStarterV2State = ComponentState<PromptStarterV2Slots> & {
+    isSingleColumn?: boolean;
+};
+
 export declare const renderPromptStarter_unstable: (state: PromptStarterState) => JSX.Element;
 
+/**
+ * Render the final JSX of PromptStarterList
+ */
+export declare const renderPromptStarterList_unstable: (state: PromptStarterListState, contextValue: PromptStarterListContextValue) => JSX.Element;
+
+export declare const renderPromptStarterV2_unstable: (state: PromptStarterV2State) => JSX.Element;
+
 /**
  * Create the state required to render PromptStarter.
  *
@@ -41,6 +121,35 @@ export declare const renderPromptStarter_unstable: (state: PromptStarterState) =
  */
 export declare const usePromptStarter_unstable: (props: PromptStarterProps, ref: React.Ref<HTMLButtonElement>) => PromptStarterState;
 
+/**
+ * Create the state required to render PromptStarterList.
+ *
+ * The returned state can be modified with hooks such as usePromptStarterListStyles_unstable,
+ * before being passed to renderPromptStarterList_unstable.
+ *
+ * @param props - props from this instance of PromptStarterList
+ * @param ref - reference to root HTMLElement of PromptStarterList
+ */
+export declare const usePromptStarterList_unstable: (props: PromptStarterListProps, ref: React_2.Ref<HTMLDivElement>) => PromptStarterListState;
+
+/**
+ * Apply styling to the PromptStarterList slots based on the state
+ */
+export declare const usePromptStarterListStyles_unstable: (state: PromptStarterListState) => PromptStarterListState;
+
 export declare const usePromptStarterStyles_unstable: (state: PromptStarterState) => PromptStarterState;
 
+/**
+ * Create the state required to render PromptStarter.
+ *
+ * The returned state can be modified with hooks such as usePromptStarterStyles_unstable,
+ * before being passed to renderPromptStarter_unstable.
+ *
+ * @param props - props from this instance of PromptStarter
+ * @param ref - reference to root HTMLElement of PromptStarter
+ */
+export declare const usePromptStarterV2_unstable: (props: PromptStarterV2Props, ref: React.Ref<HTMLDivElement>) => PromptStarterV2State;
+
+export declare const usePromptStarterV2Styles_unstable: (state: PromptStarterV2State) => PromptStarterV2State;
+
 export { }

package/lib/PromptStarterList.js

@@ -0,0 +1,2 @@
+export { PromptStarterList, renderPromptStarterList_unstable, usePromptStarterList_unstable, promptStarterListClassNames, usePromptStarterListStyles_unstable } from './components/PromptStarterV2/PromptStarterList/index';
+//# sourceMappingURL=PromptStarterList.js.map

package/lib/PromptStarterList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptStarterList.ts"],"sourcesContent":["export {\n  PromptStarterList,\n  renderPromptStarterList_unstable,\n  usePromptStarterList_unstable,\n  promptStarterListClassNames,\n  usePromptStarterListStyles_unstable,\n} from './components/PromptStarterV2/PromptStarterList/index';\nexport type {\n  PromptStarterListProps,\n  PromptStarterListSlots,\n  PromptStarterListState,\n  PromptStarterListContextValue,\n} from './components/PromptStarterV2/PromptStarterList/index';\n"],"names":["PromptStarterList","renderPromptStarterList_unstable","usePromptStarterList_unstable","promptStarterListClassNames","usePromptStarterListStyles_unstable"],"rangeMappings":"","mappings":"AAAA,SACEA,iBAAiB,EACjBC,gCAAgC,EAChCC,6BAA6B,EAC7BC,2BAA2B,EAC3BC,mCAAmC,QAC9B,uDAAuD"}

package/lib/PromptStarterV2.js

@@ -0,0 +1,2 @@
+export { PromptStarter, promptStarterClassNames, renderPromptStarter_unstable, usePromptStarterStyles_unstable, usePromptStarter_unstable } from './components/PromptStarterV2/PromptStarter/index';
+//# sourceMappingURL=PromptStarterV2.js.map

package/lib/PromptStarterV2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptStarterV2.ts"],"sourcesContent":["export type {\n  PromptStarterProps,\n  PromptStarterSlots,\n  PromptStarterState,\n} from './components/PromptStarterV2/PromptStarter/index';\nexport {\n  PromptStarter,\n  promptStarterClassNames,\n  renderPromptStarter_unstable,\n  usePromptStarterStyles_unstable,\n  usePromptStarter_unstable,\n} from './components/PromptStarterV2/PromptStarter/index';\n"],"names":["PromptStarter","promptStarterClassNames","renderPromptStarter_unstable","usePromptStarterStyles_unstable","usePromptStarter_unstable"],"rangeMappings":"","mappings":"AAKA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,mDAAmD"}

package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { usePromptStarter_unstable } from './usePromptStarter';
+import { renderPromptStarter_unstable } from './renderPromptStarter';
+import { usePromptStarterStyles_unstable } from './usePromptStarterStyles.styles';
+import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
+export const PromptStarter = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = usePromptStarter_unstable(props, ref);
+  usePromptStarterStyles_unstable(state);
+  useCustomStyleHook('usePromptStarterStyles')(state);
+  return renderPromptStarter_unstable(state);
+});
+PromptStarter.displayName = 'PromptStarter';
+//# sourceMappingURL=PromptStarter.js.map

package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptStarter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptStarter_unstable } from './usePromptStarter';\nimport { renderPromptStarter_unstable } from './renderPromptStarter';\nimport { usePromptStarterStyles_unstable } from './usePromptStarterStyles.styles';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\nimport type { PromptStarterProps } from './PromptStarter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const PromptStarter: ForwardRefComponent<PromptStarterProps> = React.forwardRef((props, ref) => {\n  const state = usePromptStarter_unstable(props, ref);\n\n  usePromptStarterStyles_unstable(state);\n  useCustomStyleHook('usePromptStarterStyles')(state);\n\n  return renderPromptStarter_unstable(state);\n});\n\nPromptStarter.displayName = 'PromptStarter';\n"],"names":["React","usePromptStarter_unstable","renderPromptStarter_unstable","usePromptStarterStyles_unstable","useCustomStyleHook","PromptStarter","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAClF,SAASC,kBAAkB,QAAQ,mCAAmC;AAItE,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CL,gCAAgCM;IAChCL,mBAAmB,0BAA0BK;IAE7C,OAAOP,6BAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.types.js

@@ -0,0 +1,4 @@
+/**
+ * State used in rendering PromptStarter
+ */export {};
+//# sourceMappingURL=PromptStarter.types.js.map

package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PromptStarter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type PromptStarterSlots = {\n  root: NonNullable<Slot<'div'>>;\n  primaryAction: NonNullable<Slot<'button'>>;\n  icon: NonNullable<Slot<'span'>>;\n  prompt: NonNullable<Slot<'span'>>;\n  reasonMarker?: Slot<'span'>;\n  actions?: Slot<'span'>;\n};\n\n/**\n * PromptStarter Props\n */\nexport type PromptStarterProps = Omit<ComponentProps<PromptStarterSlots>, 'disabled'>;\n\n/**\n * State used in rendering PromptStarter\n */\nexport type PromptStarterState = ComponentState<PromptStarterSlots> & {\n  isSingleColumn?: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAgBA;;CAEC,GACD,WAEE"}

package/lib/components/PromptStarterV2/PromptStarter/index.js

@@ -0,0 +1,5 @@
+export { PromptStarter } from './PromptStarter';
+export { renderPromptStarter_unstable } from './renderPromptStarter';
+export { usePromptStarter_unstable } from './usePromptStarter';
+export { promptStarterClassNames, usePromptStarterStyles_unstable } from './usePromptStarterStyles.styles';
+//# sourceMappingURL=index.js.map

package/lib/components/PromptStarterV2/PromptStarter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { PromptStarter } from './PromptStarter';\nexport type { PromptStarterProps, PromptStarterSlots, PromptStarterState } from './PromptStarter.types';\nexport { renderPromptStarter_unstable } from './renderPromptStarter';\nexport { usePromptStarter_unstable } from './usePromptStarter';\nexport { promptStarterClassNames, usePromptStarterStyles_unstable } from './usePromptStarterStyles.styles';\n"],"names":["PromptStarter","renderPromptStarter_unstable","usePromptStarter_unstable","promptStarterClassNames","usePromptStarterStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC"}

package/lib/components/PromptStarterV2/PromptStarter/promptStarterMotion.js

@@ -0,0 +1,52 @@
+import { createPresenceComponent } from '@fluentui/react-components';
+export const PromptStarterMotion = createPresenceComponent(({
+  index,
+  numberOfColumns
+}) => {
+  const isFirstRow = index < numberOfColumns;
+  const delay = isFirstRow ? index * 50 : (index - numberOfColumns) * 50;
+  const opacityDuration = 100;
+  const opacityOffset = delay / (delay + opacityDuration);
+  const opacityEasing = 'linear';
+  const scaleDuration = 500;
+  const scaleOffset = delay / (delay + scaleDuration);
+  const scaleEasing = `cubic-bezier(0.22, 1.59, 0.46, 1)`;
+  const opacityExitDuration = 200;
+  return {
+    enter: [{
+      keyframes: [{
+        opacity: 0
+      }, {
+        opacity: 0,
+        offset: opacityOffset
+      }, {
+        opacity: 1
+      }],
+      easing: opacityEasing,
+      duration: opacityDuration + delay
+    }, {
+      keyframes: [{
+        transform: 'scale(0.9)'
+      }, {
+        transform: 'scale(0.9)',
+        offset: scaleOffset
+      }, {
+        transform: 'scale(1)'
+      }],
+      easing: scaleEasing,
+      duration: scaleDuration + delay
+    }],
+    exit: {
+      keyframes: [{
+        opacity: 1
+      }, {
+        opacity: 1
+      }, {
+        opacity: 0
+      }],
+      easing: opacityEasing,
+      duration: opacityExitDuration
+    }
+  };
+});
+//# sourceMappingURL=promptStarterMotion.js.map

package/lib/components/PromptStarterV2/PromptStarter/promptStarterMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["promptStarterMotion.ts"],"sourcesContent":["import { createPresenceComponent } from '@fluentui/react-components';\n\nexport type PromptStarterMotionParams = { index: number; numberOfColumns: number };\n\nexport const PromptStarterMotion = createPresenceComponent<PromptStarterMotionParams>(({ index, numberOfColumns }) => {\n  const isFirstRow = index < numberOfColumns;\n  const delay = isFirstRow ? index * 50 : (index - numberOfColumns) * 50;\n\n  const opacityDuration = 100;\n  const opacityOffset = delay / (delay + opacityDuration);\n  const opacityEasing = 'linear';\n\n  const scaleDuration = 500;\n  const scaleOffset = delay / (delay + scaleDuration);\n  const scaleEasing = `cubic-bezier(0.22, 1.59, 0.46, 1)`;\n\n  const opacityExitDuration = 200;\n\n  return {\n    enter: [\n      {\n        keyframes: [{ opacity: 0 }, { opacity: 0, offset: opacityOffset }, { opacity: 1 }],\n        easing: opacityEasing,\n        duration: opacityDuration + delay,\n      },\n      {\n        keyframes: [\n          { transform: 'scale(0.9)' },\n          { transform: 'scale(0.9)', offset: scaleOffset },\n          { transform: 'scale(1)' },\n        ],\n        easing: scaleEasing,\n        duration: scaleDuration + delay,\n      },\n    ],\n    exit: {\n      keyframes: [{ opacity: 1 }, { opacity: 1 }, { opacity: 0 }],\n      easing: opacityEasing,\n      duration: opacityExitDuration,\n    },\n  };\n});\n"],"names":["createPresenceComponent","PromptStarterMotion","index","numberOfColumns","isFirstRow","delay","opacityDuration","opacityOffset","opacityEasing","scaleDuration","scaleOffset","scaleEasing","opacityExitDuration","enter","keyframes","opacity","offset","easing","duration","transform","exit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,uBAAuB,QAAQ,6BAA6B;AAIrE,OAAO,MAAMC,sBAAsBD,wBAAmD,CAAC,EAAEE,KAAK,EAAEC,eAAe,EAAE;IAC/G,MAAMC,aAAaF,QAAQC;IAC3B,MAAME,QAAQD,aAAaF,QAAQ,KAAK,AAACA,CAAAA,QAAQC,eAAc,IAAK;IAEpE,MAAMG,kBAAkB;IACxB,MAAMC,gBAAgBF,QAASA,CAAAA,QAAQC,eAAc;IACrD,MAAME,gBAAgB;IAEtB,MAAMC,gBAAgB;IACtB,MAAMC,cAAcL,QAASA,CAAAA,QAAQI,aAAY;IACjD,MAAME,cAAc,CAAC,iCAAiC,CAAC;IAEvD,MAAMC,sBAAsB;IAE5B,OAAO;QACLC,OAAO;YACL;gBACEC,WAAW;oBAAC;wBAAEC,SAAS;oBAAE;oBAAG;wBAAEA,SAAS;wBAAGC,QAAQT;oBAAc;oBAAG;wBAAEQ,SAAS;oBAAE;iBAAE;gBAClFE,QAAQT;gBACRU,UAAUZ,kBAAkBD;YAC9B;YACA;gBACES,WAAW;oBACT;wBAAEK,WAAW;oBAAa;oBAC1B;wBAAEA,WAAW;wBAAcH,QAAQN;oBAAY;oBAC/C;wBAAES,WAAW;oBAAW;iBACzB;gBACDF,QAAQN;gBACRO,UAAUT,gBAAgBJ;YAC5B;SACD;QACDe,MAAM;YACJN,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;YAC3DE,QAAQT;YACRU,UAAUN;QACZ;IACF;AACF,GAAG"}

package/lib/components/PromptStarterV2/PromptStarter/renderPromptStarter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-components';
+export const renderPromptStarter_unstable = state => {
+  assertSlots(state);
+  return /*#__PURE__*/_jsxs(state.root, {
+    children: [/*#__PURE__*/_jsxs(state.primaryAction, {
+      children: [/*#__PURE__*/_jsx(state.icon, {}), /*#__PURE__*/_jsx(state.prompt, {}), state.reasonMarker && /*#__PURE__*/_jsx(state.reasonMarker, {})]
+    }), state.actions && /*#__PURE__*/_jsx(state.actions, {})]
+  });
+};
+//# sourceMappingURL=renderPromptStarter.js.map

package/lib/components/PromptStarterV2/PromptStarter/renderPromptStarter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderPromptStarter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PromptStarterState, PromptStarterSlots } from './PromptStarter.types';\n\nexport const renderPromptStarter_unstable = (state: PromptStarterState) => {\n  assertSlots<PromptStarterSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        <state.icon />\n        <state.prompt />\n        {state.reasonMarker && <state.reasonMarker />}\n      </state.primaryAction>\n      {state.actions && <state.actions />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderPromptStarter_unstable","state","root","primaryAction","icon","prompt","reasonMarker","actions"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBACE,MAACA,MAAMC,IAAI;;0BACT,MAACD,MAAME,aAAa;;kCAClB,KAACF,MAAMG,IAAI;kCACX,KAACH,MAAMI,MAAM;oBACZJ,MAAMK,YAAY,kBAAI,KAACL,MAAMK,YAAY;;;YAE3CL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;;;AAGtC,EAAE"}

package/lib/components/PromptStarterV2/PromptStarter/usePromptStarter.js

@@ -0,0 +1,62 @@
+import { getIntrinsicElementProps, slot, useFocusableGroup, useId } from '@fluentui/react-components';
+import { usePromptStarterListContext } from '../../../contexts/PromptStarterListContext';
+/**
+ * Create the state required to render PromptStarter.
+ *
+ * The returned state can be modified with hooks such as usePromptStarterStyles_unstable,
+ * before being passed to renderPromptStarter_unstable.
+ *
+ * @param props - props from this instance of PromptStarter
+ * @param ref - reference to root HTMLElement of PromptStarter
+ */
+export const usePromptStarter_unstable = (props, ref) => {
+  const id = useId('prompt-starter');
+  const focusAttrs = useFocusableGroup();
+  const numberOfColumns = usePromptStarterListContext(ctx => ctx.numberOfColumns);
+  const state = {
+    isSingleColumn: numberOfColumns === 1,
+    components: {
+      root: 'div',
+      primaryAction: 'button',
+      icon: 'span',
+      prompt: 'span',
+      reasonMarker: 'span',
+      actions: 'span'
+    },
+    root: slot.always(getIntrinsicElementProps('div', {
+      ref,
+      'aria-labelledby': `${id}-prompt`,
+      'aria-describedby': `${id}-icon, ${id}-reasonMarker`,
+      ...focusAttrs,
+      ...props
+    }), {
+      elementType: 'div'
+    }),
+    primaryAction: slot.always(props.primaryAction, {
+      elementType: 'button'
+    }),
+    icon: slot.always(props.icon, {
+      defaultProps: {
+        id: `${id}-icon`
+      },
+      elementType: 'span'
+    }),
+    prompt: slot.always(props.prompt, {
+      defaultProps: {
+        id: `${id}-prompt`
+      },
+      elementType: 'span'
+    }),
+    reasonMarker: slot.optional(props.reasonMarker, {
+      defaultProps: {
+        id: `${id}-reasonMarker`
+      },
+      elementType: 'span'
+    }),
+    actions: slot.optional(props.actions, {
+      elementType: 'span'
+    })
+  };
+  return state;
+};
+//# sourceMappingURL=usePromptStarter.js.map

package/lib/components/PromptStarterV2/PromptStarter/usePromptStarter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePromptStarter.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot, useFocusableGroup, useId } from '@fluentui/react-components';\nimport { usePromptStarterListContext } from '../../../contexts/PromptStarterListContext';\nimport type { PromptStarterProps, PromptStarterState } from './PromptStarter.types';\n\n/**\n * Create the state required to render PromptStarter.\n *\n * The returned state can be modified with hooks such as usePromptStarterStyles_unstable,\n * before being passed to renderPromptStarter_unstable.\n *\n * @param props - props from this instance of PromptStarter\n * @param ref - reference to root HTMLElement of PromptStarter\n */\nexport const usePromptStarter_unstable = (\n  props: PromptStarterProps,\n  ref: React.Ref<HTMLDivElement>,\n): PromptStarterState => {\n  const id = useId('prompt-starter');\n  const focusAttrs = useFocusableGroup();\n\n  const numberOfColumns = usePromptStarterListContext(ctx => ctx.numberOfColumns);\n\n  const state: PromptStarterState = {\n    isSingleColumn: numberOfColumns === 1,\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      icon: 'span',\n      prompt: 'span',\n      reasonMarker: 'span',\n      actions: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        'aria-labelledby': `${id}-prompt`,\n        'aria-describedby': `${id}-icon, ${id}-reasonMarker`,\n        ...focusAttrs,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    primaryAction: slot.always(props.primaryAction, {\n      elementType: 'button',\n    }),\n    icon: slot.always(props.icon, {\n      defaultProps: { id: `${id}-icon` },\n      elementType: 'span',\n    }),\n    prompt: slot.always(props.prompt, {\n      defaultProps: { id: `${id}-prompt` },\n      elementType: 'span',\n    }),\n    reasonMarker: slot.optional(props.reasonMarker, {\n      defaultProps: { id: `${id}-reasonMarker` },\n      elementType: 'span',\n    }),\n    actions: slot.optional(props.actions, { elementType: 'span' }),\n  };\n\n  return state;\n};\n"],"names":["getIntrinsicElementProps","slot","useFocusableGroup","useId","usePromptStarterListContext","usePromptStarter_unstable","props","ref","id","focusAttrs","numberOfColumns","ctx","state","isSingleColumn","components","root","primaryAction","icon","prompt","reasonMarker","actions","always","elementType","defaultProps","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,iBAAiB,EAAEC,KAAK,QAAQ,6BAA6B;AACtG,SAASC,2BAA2B,QAAQ,6CAA6C;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,KAAKL,MAAM;IACjB,MAAMM,aAAaP;IAEnB,MAAMQ,kBAAkBN,4BAA4BO,CAAAA,MAAOA,IAAID,eAAe;IAE9E,MAAME,QAA4B;QAChCC,gBAAgBH,oBAAoB;QACpCI,YAAY;YACVC,MAAM;YACNC,eAAe;YACfC,MAAM;YACNC,QAAQ;YACRC,cAAc;YACdC,SAAS;QACX;QACAL,MAAMd,KAAKoB,MAAM,CACfrB,yBAAyB,OAAO;YAC9BO;YACA,mBAAmB,CAAC,EAAEC,GAAG,OAAO,CAAC;YACjC,oBAAoB,CAAC,EAAEA,GAAG,OAAO,EAAEA,GAAG,aAAa,CAAC;YACpD,GAAGC,UAAU;YACb,GAAGH,KAAK;QACV,IACA;YAAEgB,aAAa;QAAM;QAEvBN,eAAef,KAAKoB,MAAM,CAACf,MAAMU,aAAa,EAAE;YAC9CM,aAAa;QACf;QACAL,MAAMhB,KAAKoB,MAAM,CAACf,MAAMW,IAAI,EAAE;YAC5BM,cAAc;gBAAEf,IAAI,CAAC,EAAEA,GAAG,KAAK,CAAC;YAAC;YACjCc,aAAa;QACf;QACAJ,QAAQjB,KAAKoB,MAAM,CAACf,MAAMY,MAAM,EAAE;YAChCK,cAAc;gBAAEf,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAAC;YACnCc,aAAa;QACf;QACAH,cAAclB,KAAKuB,QAAQ,CAAClB,MAAMa,YAAY,EAAE;YAC9CI,cAAc;gBAAEf,IAAI,CAAC,EAAEA,GAAG,aAAa,CAAC;YAAC;YACzCc,aAAa;QACf;QACAF,SAASnB,KAAKuB,QAAQ,CAAClB,MAAMc,OAAO,EAAE;YAAEE,aAAa;QAAO;IAC9D;IAEA,OAAOV;AACT,EAAE"}

package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.js

@@ -0,0 +1,204 @@
+import { __styles, __resetStyles, mergeClasses, shorthands, typographyStyles, createFocusOutlineStyle } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const promptStarterClassNames = {
+  root: 'fai-PromptStarter',
+  primaryAction: 'fai-PromptStarter__primaryAction',
+  icon: 'fai-PromptStarter__icon',
+  prompt: 'fai-PromptStarter__prompt',
+  reasonMarker: 'fai-PromptStarter__reasonMarker',
+  actions: 'fai-PromptStarter__actions'
+};
+const useRootResetStyles = __resetStyles("r1x2hm06", null, [".r1x2hm06{display:grid;grid-template-columns:1fr auto;grid-template-rows:max-content auto;min-width:214px;}", ".r1x2hm06:hover .fai-PromptStarter__primaryAction{box-shadow:var(--shadow16);transform:scale(1.03);transition:transform var(--durationNormal) var(--curveDecelerateMin);}", ".r1x2hm06:active .fai-PromptStarter__primaryAction{box-shadow:var(--shadow8);transform:scale(1.03);transition:transform var(--durationNormal) var(--curveDecelerateMin);}", ".r1x2hm06:not(:focus-within):not(:hover) .fai-PromptStarter__actions{clip:rect(0px, 0px, 0px, 0px);height:1px;margin:-1px;overflow:hidden;padding:0px;width:1px;position:absolute;opacity:0;}"]);
+const useStyles = __styles({
+  primaryAction: {
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "fcdwmbt",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f1eb8yyf",
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    qhf8xq: "f10pi13n",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f14w4nd",
+    De3pzq: "fxugw4r",
+    sj55zd: "fkfq4zb",
+    Bahqtrf: "fk6fouc",
+    Bceei9c: "f1k6fduh",
+    oeaueh: "f1s6fcnf",
+    fsow6f: ["f1o700av", "fes3tcz"],
+    Belr9w4: "fylz90v",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fq88wcj",
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "f68mrw8",
+    h3c5rm: ["f7pw515", "fw35ms5"],
+    B9xav0g: "frpde29",
+    zhjwy3: ["fw35ms5", "f7pw515"],
+    Brovlpu: "ftqa4ok",
+    B486eqv: "f2hkw1w",
+    B8q5s1w: "f8hki3x",
+    Bci5o5g: ["f1d2448m", "ffh67wi"],
+    n8qw10: "f1bjia2o",
+    Bdrgwmp: ["ffh67wi", "f1d2448m"],
+    Bqhya38: "f1j6vpng",
+    Bwxa6fj: ["f1pniga2", "f1ffjurs"],
+    Bdhvstf: "f987i1v",
+    B7zbvrb: ["f1ffjurs", "f1pniga2"],
+    Bm4h7ae: "f15bsgw9",
+    B7ys5i9: "f14e48fq",
+    Busjfv9: "f18yb2kv",
+    Bhk32uz: "fd6o370",
+    f6g5ot: 0,
+    Boxcth7: 0,
+    Bhdgwq3: 0,
+    hgwjuy: 0,
+    Bshpdp8: 0,
+    Bsom6fd: 0,
+    Blkhhs4: 0,
+    Bonggc9: 0,
+    Ddfuxk: 0,
+    i03rao: 0,
+    kclons: 0,
+    clg4pj: 0,
+    Bpqj9nj: 0,
+    B6dhp37: 0,
+    Bf4ptjt: 0,
+    Bqtpl0w: 0,
+    i4rwgc: "ffwy5si",
+    Dah5zi: 0,
+    B1tsrr9: 0,
+    qqdqy8: 0,
+    Bkh64rk: 0,
+    e3fwne: "faugzkp",
+    J0r882: "f57olzd",
+    Bule8hv: ["f4stah7", "fs1por5"],
+    Bjwuhne: "f480a47",
+    Ghsupd: ["fs1por5", "f4stah7"]
+  },
+  primaryActionHovered: {
+    E5pizo: "f1hg901r",
+    Bz10aip: "f15ncuxf",
+    Bn62ygk: 0,
+    Cwk7ip: 0,
+    B3o57yi: 0,
+    Bmy1vo4: 0,
+    Bkqvd7p: 0,
+    Bi2q7bf: "ffrhwuo"
+  },
+  icon: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    sshi5w: "fntfeoj"
+  },
+  actions: {
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: ["foizga4", "f5m8a6r"],
+    qhf8xq: "f10pi13n",
+    nk6f5a: 0,
+    Ijaq50: 0,
+    h3tjnc: "f3hl5xl",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    Beweih1: "f14q5zaz",
+    abs64n: "f5p0z4x",
+    Bn62ygk: 0,
+    Cwk7ip: 0,
+    B3o57yi: 0,
+    Bmy1vo4: 0,
+    Bkqvd7p: 0,
+    Bi2q7bf: "f1964ud6"
+  },
+  prompt: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1i3iumi",
+    mc9l5x: "f1rvi9lw",
+    Fd1uvx: "fpfc2by",
+    Bh9c35c: "f1lvsx7g",
+    Bmxbyg5: "f1sil6mw"
+  },
+  reasonMarker: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f13mqy1h",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fcpl73t"
+  },
+  singleColumnStyles: {
+    mc9l5x: "fjseox"
+  }
+}, {
+  d: [[".fcdwmbt{grid-row:1/3;}", {
+    p: -1
+  }], [".f1eb8yyf{grid-column:1/3;}", {
+    p: -1
+  }], ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f10pi13n{position:relative;}", [".f14w4nd{border-radius:28px;}", {
+    p: -1
+  }], ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1k6fduh{cursor:pointer;}", ".f1s6fcnf{outline-style:none;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", [".fq88wcj{padding:var(--spacingVerticalL) var(--spacingHorizontalL);}", {
+    p: -1
+  }], ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".ffwy5si[data-fui-focus-visible]::after{border:2px solid var(--colorStrokeFocus2);}", {
+    p: -2
+  }], [".faugzkp[data-fui-focus-visible]::after{border-radius:28px;}", {
+    p: -1
+  }], ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".f15ncuxf{transform:scale(1.03);}", [".ffrhwuo{transition:transform var(--durationNormal) var(--curveDecelerateMin);}", {
+    p: -1
+  }], ".f122n59{align-items:center;}", ".fntfeoj{min-height:var(--spacingVerticalXXL);}", [".foizga4{margin:var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalNone) var(--spacingHorizontalNone);}", {
+    p: -1
+  }], [".f5m8a6r{margin:var(--spacingVerticalL) var(--spacingHorizontalNone) var(--spacingVerticalNone) var(--spacingHorizontalL);}", {
+    p: -1
+  }], [".f3hl5xl{grid-row:1/2;}", {
+    p: -1
+  }], [".f14q5zaz{grid-column:2/3;}", {
+    p: -1
+  }], ".f5p0z4x{opacity:1;}", [".f1964ud6{transition:opacity var(--durationFast) var(--curveLinear);}", {
+    p: -1
+  }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1rvi9lw{display:-webkit-box;}", ".fpfc2by{-webkit-box-orient:vertical;}", ".f1lvsx7g{-webkit-line-clamp:2;}", ".f1sil6mw{overflow-y:hidden;}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fjseox{display:none;}"],
+  f: [".ftqa4ok:focus{outline-style:none;}"],
+  i: [".f2hkw1w:focus-visible{outline-style:none;}"],
+  m: [["@media (forced-colors: active){.f1j6vpng[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ffjurs[data-fui-focus-visible]::after{border-left-color:Highlight;}.f1pniga2[data-fui-focus-visible]::after{border-right-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f987i1v[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+export const usePromptStarterStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    isSingleColumn
+  } = state;
+  const styles = useStyles();
+  const rootResetStyles = useRootResetStyles();
+  state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);
+  state.primaryAction.className = mergeClasses(promptStarterClassNames.primaryAction, styles.primaryAction, state.primaryAction.className);
+  state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, isSingleColumn && styles.singleColumnStyles, state.icon.className);
+  state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);
+  if (state.reasonMarker) {
+    state.reasonMarker.className = mergeClasses(promptStarterClassNames.reasonMarker, styles.reasonMarker, isSingleColumn && styles.singleColumnStyles, state.reasonMarker.className);
+  }
+  if (state.actions) {
+    state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, isSingleColumn && styles.singleColumnStyles, state.actions.className);
+  }
+  return state;
+};
+//# sourceMappingURL=usePromptStarterStyles.styles.js.map