botframework-webchat-component 4.18.2 → 4.19.0

package/src/Dictation.js

@@ -1,9 +1,9 @@
 import { hooks } from 'botframework-webchat-api';
 // TODO: [P1] #3350 No import from internal, we need to move setDictateState from bf-wc-core (Redux) to React Context.
-import { useSetDictateState } from 'botframework-webchat-api/internal';
+import { useSetDictateState } from 'botframework-webchat-api/internal.js';
 import { Constants } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Composer as DictateComposer } from 'react-dictate-button';
 
 import useResumeAudioContext from './hooks/internal/useResumeAudioContext';
@@ -11,17 +11,17 @@ import useSettableDictateAbortable from './hooks/internal/useSettableDictateAbor
 import useWebSpeechPonyfill from './hooks/useWebSpeechPonyfill';
 
 const {
-  useActivities,
   useDictateInterims,
   useDictateState,
-  useDisabled,
   useEmitTypingIndicator,
   useLanguage,
   useSendBoxValue,
   useSendTypingIndicator,
   useShouldSpeakIncomingActivity,
   useStopDictate,
-  useSubmitSendBox
+  useStyleOptions,
+  useSubmitSendBox,
+  useUIState
 } = hooks;
 
 const {
@@ -34,28 +34,21 @@ const Dictation = ({ onError }) => {
   const [, setSendBox] = useSendBoxValue();
   const [, setShouldSpeakIncomingActivity] = useShouldSpeakIncomingActivity();
   const [{ SpeechGrammarList, SpeechRecognition } = {}] = useWebSpeechPonyfill();
-  const [activities] = useActivities();
+  const [{ speechRecognitionContinuous }] = useStyleOptions();
   const [dictateState] = useDictateState();
-  const [disabled] = useDisabled();
   const [sendTypingIndicator] = useSendTypingIndicator();
   const [speechLanguage] = useLanguage('speech');
+  const [uiState] = useUIState();
   const emitTypingIndicator = useEmitTypingIndicator();
   const resumeAudioContext = useResumeAudioContext();
   const setDictateState = useSetDictateState();
   const stopDictate = useStopDictate();
   const submitSendBox = useSubmitSendBox();
 
-  const numSpeakingActivities = useMemo(
-    () => activities.filter(({ channelData: { speak } = {} }) => speak).length,
-    [activities]
-  );
-
   const handleDictate = useCallback(
     ({ result: { confidence, transcript } = {} }) => {
       if (dictateState === DICTATING || dictateState === STARTING) {
         setDictateInterims([]);
-        setDictateState(IDLE);
-        stopDictate();
 
         if (transcript) {
           setSendBox(transcript);
@@ -64,15 +57,7 @@ const Dictation = ({ onError }) => {
         }
       }
     },
-    [
-      dictateState,
-      setDictateInterims,
-      setDictateState,
-      stopDictate,
-      setSendBox,
-      submitSendBox,
-      setShouldSpeakIncomingActivity
-    ]
+    [dictateState, setDictateInterims, setSendBox, submitSendBox, setShouldSpeakIncomingActivity]
   );
 
   const handleDictating = useCallback(
@@ -89,6 +74,11 @@ const Dictation = ({ onError }) => {
     [dictateState, emitTypingIndicator, sendTypingIndicator, setDictateAbortable, setDictateInterims, setDictateState]
   );
 
+  const handleEnd = useCallback(() => {
+    dictateState !== IDLE && setDictateState(IDLE);
+    (dictateState === DICTATING || dictateState === STARTING) && stopDictate();
+  }, [dictateState, setDictateState, stopDictate]);
+
   const handleError = useCallback(
     event => {
       dictateState !== IDLE && setDictateState(IDLE);
@@ -107,13 +97,15 @@ const Dictation = ({ onError }) => {
 
   return (
     <DictateComposer
+      continuous={speechRecognitionContinuous}
       lang={speechLanguage}
       onDictate={handleDictate}
+      onEnd={handleEnd}
       onError={handleError}
       onProgress={handleDictating}
       speechGrammarList={SpeechGrammarList}
       speechRecognition={SpeechRecognition}
-      started={!disabled && (dictateState === STARTING || dictateState === DICTATING) && !numSpeakingActivities}
+      started={uiState !== 'disabled' && (dictateState === STARTING || dictateState === DICTATING)}
     />
   );
 };

package/src/ErrorBox.tsx

@@ -1,45 +1,73 @@
 /* eslint no-console: "off" */
 
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import React, { Fragment, memo, useEffect } from 'react';
+import { object, optional, pipe, readonly, string, unknown, type InferInput } from 'valibot';
 
-import ScreenReaderText from './ScreenReaderText';
 import useStyleSet from './hooks/useStyleSet';
+import ScreenReaderText from './ScreenReaderText';
+
+const { useLocalizer, useTrackException } = hooks;
 
-const { useLocalizer } = hooks;
+/**
+ * @deprecated This component is deprecated and will be removed on or after 2027-08-16.
+ */
+const errorBoxPropsSchema = pipe(
+  object({
+    error: unknown(),
+    type: optional(string())
+  }),
+  readonly()
+);
 
-type ErrorBoxProps = {
-  error: Error;
-  type?: string;
-};
+/**
+ * @deprecated This component is deprecated and will be removed on or after 2027-08-16.
+ */
+type ErrorBoxProps = InferInput<typeof errorBoxPropsSchema>;
+
+/**
+ * @deprecated This component is deprecated and will be removed on or after 2027-08-16.
+ */
+function ErrorBox(props: ErrorBoxProps) {
+  const { error, type = '' } = validateProps(errorBoxPropsSchema, props);
 
-const ErrorBox: FC<ErrorBoxProps> = ({ error, type }) => {
   const [{ errorBox: errorBoxStyleSet }] = useStyleSet();
   const localize = useLocalizer();
+  const trackException = useTrackException();
+
+  useEffect(() => {
+    let rectifiedError: Error;
+
+    if (error instanceof Error) {
+      rectifiedError = error;
+    } else {
+      rectifiedError = new Error('Unknown error occured');
+      rectifiedError.cause = error;
+    }
+
+    trackException(rectifiedError, false);
+  }, [error, trackException]);
 
   return (
-    <React.Fragment>
+    <Fragment>
       <ScreenReaderText text={localize('ACTIVITY_ERROR_BOX_TITLE')} />
       <div className={errorBoxStyleSet}>
         <div>{type}</div>
         {/* The callstack between production and development are different, thus, we should hide it for visual regression test */}
-        <details>
-          <summary>{error.message}</summary>
-          <pre>{error.stack}</pre>
-        </details>
+        {error instanceof Error ? (
+          <details>
+            <summary>{error.message}</summary>
+            <pre>{error.stack}</pre>
+          </details>
+        ) : (
+          // eslint-disable-next-line no-magic-numbers
+          <pre>{JSON.stringify(error, null, 2)}</pre>
+        )}
       </div>
-    </React.Fragment>
+    </Fragment>
   );
-};
-
-ErrorBox.defaultProps = {
-  type: ''
-};
-
-ErrorBox.propTypes = {
-  error: PropTypes.instanceOf(Error).isRequired,
-  type: PropTypes.string
-};
+}
 
-export default ErrorBox;
+export default memo(ErrorBox);
+export { errorBoxPropsSchema, type ErrorBoxProps };

package/src/Icon/ComponentIcon.module.css

@@ -0,0 +1,113 @@
+:global(.webchat) .component-icon {
+  min-width: var(--webchat__component-icon--size, 1em);
+  min-height: var(--webchat__component-icon--size, 1em);
+  place-self: var(--webchat__component-icon--placement, center);
+
+  /* Use the image as texture. */
+  background-image: var(--webchat__component-icon--image, none);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: var(--webchat__component-icon--size, 1em);
+
+  /* If image is not set, fallback to solid color. */
+  background-color: var(--webchat__component-icon--color, transparent);
+
+  /* 3. Set the mask if any. */
+  -webkit-mask-image: var(--webchat__component-icon--mask);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: var(--webchat__component-icon--size, 1em);
+  mask-image: var(--webchat__component-icon--mask);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: var(--webchat__component-icon--size, 1em);
+}
+
+/* #region: Appearance */
+:global(.webchat) .appearance--text {
+  --webchat__component-icon--color: currentColor;
+
+  @media (forced-colors: active) {
+    --webchat__component-icon--color: canvasText;
+  }
+}
+/* #endregion */
+
+/* #region: Icons */
+:global(.webchat) .icon--dismiss {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"/></svg>');
+}
+
+:global(.webchat) .icon--view-code {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M12.94 4.05a.75.75 0 0 0-1.38-.6l-5.5 12.5a.75.75 0 1 0 1.38.6l5.5-12.5Zm1.35 9.8a.75.75 0 0 1-.13-1.06L16.3 10l-2.14-2.8a.75.75 0 0 1 1.18-.9l2.5 3.24c.21.27.21.65 0 .92l-2.5 3.25a.75.75 0 0 1-1.05.13Zm-8.58-7.7c.33.26.39.73.13 1.06L3.7 10l2.14 2.8a.75.75 0 1 1-1.18.9l-2.5-3.24a.75.75 0 0 1 0-.92l2.5-3.25a.75.75 0 0 1 1.05-.13Z" fill="currentColor"></path></svg>');
+}
+
+:global(.webchat) .icon--copy {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none"><path d="M8.5 2C7.39543 2 6.5 2.89543 6.5 4V14C6.5 15.1046 7.39543 16 8.5 16H14.5C15.6046 16 16.5 15.1046 16.5 14V4C16.5 2.89543 15.6046 2 14.5 2H8.5ZM7.5 4C7.5 3.44772 7.94772 3 8.5 3H14.5C15.0523 3 15.5 3.44772 15.5 4V14C15.5 14.5523 15.0523 15 14.5 15H8.5C7.94772 15 7.5 14.5523 7.5 14V4ZM4.5 6.00001C4.5 5.25973 4.9022 4.61339 5.5 4.26758V14.5C5.5 15.8807 6.61929 17 8 17H14.2324C13.8866 17.5978 13.2403 18 12.5 18H8C6.067 18 4.5 16.433 4.5 14.5V6.00001Z" fill="currentColor"/></svg>');
+}
+
+:global(.webchat) .icon--microphone {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 34.75 46"><path d="M29.75,23v6.36a7,7,0,0,1-.56,2.78,7.16,7.16,0,0,1-3.8,3.8,7,7,0,0,1-2.78.56H18.5v2.25H23V41H11.75v-2.25h4.5V36.5h-4.11a7,7,0,0,1-2.78-.56,7.16,7.16,0,0,1-3.8-3.8,7,7,0,0,1-.56-2.78V23h2.25v6.36a4.72,4.72,0,0,0,.39,1.9,4.78,4.78,0,0,0,2.6,2.6,4.72,4.72,0,0,0,1.9.39h10.47a4.72,4.72,0,0,0,1.9-.39,4.78,4.78,0,0,0,2.6-2.6,4.72,4.72,0,0,0,.39-1.9V23Zm-18,5.62a1.13,1.13,0,0,0,1.13,1.13h9a1.13,1.13,0,0,0,1.12-1.13V8.38a1.13,1.13,0,0,0-1.12-1.13h-9a1.13,1.13,0,0,0-1.13,1.13Zm1.13,3.38a3.41,3.41,0,0,1-1.32-.26,3.31,3.31,0,0,1-1.8-1.8,3.41,3.41,0,0,1-.26-1.32V8.38a3.41,3.41,0,0,1,.26-1.32,3.31,3.31,0,0,1,1.8-1.8,3.41,3.41,0,0,1,1.32-.26h9a3.4,3.4,0,0,1,1.31.26,3.31,3.31,0,0,1,1.8,1.8,3.41,3.41,0,0,1,.26,1.32v20.24a3.41,3.41,0,0,1-.26,1.32,3.31,3.31,0,0,1-1.8,1.8,3.4,3.4,0,0,1-1.31.26Z"/></svg>');
+}
+
+:global(.webchat) .icon--send {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 45.7 33.8"><path clipRule="evenodd" d="M8.55 25.25l21.67-7.25H11zm2.41-9.47h19.26l-21.67-7.23zm-6 13l4-11.9L5 5l35.7 11.9z"/></svg>');
+}
+
+/* We can merge two styles together. If browser doesn't understand :dir(rtl), it will drop the other one. */
+:global(.webchat) .icon--send.direction--rtl {
+  transform: scale(-1, 1);
+}
+
+:global(.webchat) .icon--send.direction--follow:dir(rtl) {
+  transform: scale(-1, 1);
+}
+
+:global(.webchat) .icon--attachment {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><path fill="currentColor" d="M18.794 7.152V20.16a4.682 4.682 0 0 1-.378 1.869 4.84 4.84 0 0 1-2.55 2.55 4.802 4.802 0 0 1-3.732 0 4.84 4.84 0 0 1-2.55-2.55 4.681 4.681 0 0 1-.377-1.869V6.464c-.004-.454.09-.905.273-1.32a3.464 3.464 0 0 1 1.826-1.827 3.336 3.336 0 0 1 2.648 0 3.463 3.463 0 0 1 1.826 1.826c.184.416.278.867.274 1.321V20.16c.002.276-.052.549-.158.803A2.015 2.015 0 0 1 14.8 22.06c-.512.21-1.088.21-1.6 0a2.013 2.013 0 0 1-1.096-1.096 2.074 2.074 0 0 1-.158-.803V8.522h1.37V20.16a.687.687 0 1 0 1.369 0V6.464a2.068 2.068 0 0 0-.597-1.454 2.014 2.014 0 0 0-.657-.439 2.106 2.106 0 0 0-1.601 0 2.015 2.015 0 0 0-1.096 1.096 2.07 2.07 0 0 0-.158.797V20.16c-.003.457.09.909.274 1.327a3.463 3.463 0 0 0 1.826 1.826 3.335 3.335 0 0 0 2.648 0 3.463 3.463 0 0 0 1.826-1.826c.184-.418.277-.87.274-1.327V7.152h1.37Z"/></svg>');
+}
+
+:global(.webchat) .icon--attachment-checkmark {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><path fill="currentColor" d="M12.634 3.04c.455 0 .905.094 1.323.274a3.464 3.464 0 0 1 1.826 1.827c.184.415.278.865.275 1.32v9.494c-.517.334-.98.744-1.37 1.216V6.46a2.07 2.07 0 0 0-.596-1.454 2.018 2.018 0 0 0-.658-.439 2.106 2.106 0 0 0-1.6 0 2.015 2.015 0 0 0-1.097 1.096 2.071 2.071 0 0 0-.158.797v13.696c-.003.457.09.91.275 1.327a3.464 3.464 0 0 0 1.825 1.826c.384.167.797.257 1.215.271.227.476.516.916.855 1.313a4.801 4.801 0 0 1-2.611-.317 4.84 4.84 0 0 1-2.551-2.552 4.68 4.68 0 0 1-.377-1.868V6.461c-.003-.455.09-.905.274-1.32a3.464 3.464 0 0 1 1.826-1.827c.418-.18.868-.274 1.324-.274Zm.684 17.117a.684.684 0 0 0 .022.235 6.068 6.068 0 0 0 .078 1.738 2.019 2.019 0 0 1-1.31-1.169 2.079 2.079 0 0 1-.159-.804V8.52h1.37v11.638Zm5.479-5.136c-.475.04-.933.134-1.37.279V7.15h1.37v7.87Z"/><path fill="currentColor" d="M19.31 26a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm2.104-5.896-2.25 2.25a.5.5 0 0 1-.708 0l-1-1a.5.5 0 0 1 .707-.707l.647.646 1.896-1.896a.5.5 0 0 1 .708.707Z"/></svg>');
+}
+
+:global(.webchat) .icon--copy-code {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M5.085 2A1.5 1.5 0 0 1 6.5 1h3a1.5 1.5 0 0 1 1.415 1h.585A1.5 1.5 0 0 1 13 3.5v3.996c-.168 0-.336.027-.497.084A1.503 1.503 0 0 0 12 6.377V3.5a.5.5 0 0 0-.5-.5h-.585A1.5 1.5 0 0 1 9.5 4h-3a1.5 1.5 0 0 1-1.415-1H4.5a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h3.088l-.026.088c-.089.312-.072.628.028.912H4.5A1.5 1.5 0 0 1 3 13.5v-10A1.5 1.5 0 0 1 4.5 2h.585ZM6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3Zm2.87 12.842a.502.502 0 0 1-.82-.136.498.498 0 0 1-.026-.343l2-7a.5.5 0 1 1 .962.274l-2 7a.498.498 0 0 1-.116.205ZM7.38 9.32a.5.5 0 1 0-.76-.65l-1.5 1.75a.5.5 0 0 0 0 .65l1.5 1.75a.5.5 0 1 0 .76-.65l-1.221-1.425 1.22-1.425Zm5.295 3.554a.5.5 0 0 1-.055-.705l1.222-1.424L12.62 9.32a.5.5 0 1 1 .76-.65l1.5 1.75a.5.5 0 0 1 0 .65l-1.5 1.75a.5.5 0 0 1-.705.054Z"/></svg>');
+}
+
+:global(.webchat) .icon--copy-code-checkmark {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M5.085 2A1.5 1.5 0 0 1 6.5 1h3a1.5 1.5 0 0 1 1.415 1h.585A1.5 1.5 0 0 1 13 3.5v2.707a5.48 5.48 0 0 0-1-.185V3.5a.5.5 0 0 0-.5-.5h-.585A1.5 1.5 0 0 1 9.5 4h-3a1.5 1.5 0 0 1-1.415-1H4.5a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h2.1c.183.358.404.693.657 1H4.5A1.5 1.5 0 0 1 3 13.5v-10A1.5 1.5 0 0 1 4.5 2h.585ZM6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3Zm9.5 9.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-2.146-1.854a.5.5 0 0 0-.708 0L10.5 12.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708Z"/></svg>');
+}
+
+:global(.webchat) .icon--thumb-up {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M8.035 1.923c.21-.52.795-1.08 1.546-.871.59.164.973.52 1.193.996.204.443.254.965.264 1.462.01.535-.102 1.176-.233 1.738a14.53 14.53 0 0 1-.195.74h1.385a2 2 0 0 1 1.919 2.563l-1.364 4.646a2.5 2.5 0 0 1-3.148 1.681l-5.356-1.682a2 2 0 0 1-1.273-1.205l-.52-1.384a2 2 0 0 1 .856-2.426l1.872-1.104a4.063 4.063 0 0 0 .523-.495c.344-.389.817-1.036 1.292-2.045.205-.436.377-.779.533-1.09.253-.503.465-.924.706-1.524ZM5.519 7.92a.517.517 0 0 1-.017.01L3.617 9.042a1 1 0 0 0-.428 1.213l.52 1.384a1 1 0 0 0 .637.603L9.7 13.924a1.5 1.5 0 0 0 1.89-1.008l1.363-4.646a1 1 0 0 0-.96-1.282H9.927a.5.5 0 0 1-.471-.667c.1-.282.252-.771.376-1.302.126-.538.215-1.082.207-1.49-.01-.468-.059-.816-.173-1.062-.098-.215-.251-.368-.552-.452-.043-.012-.094-.008-.16.035a.538.538 0 0 0-.19.246 20.426 20.426 0 0 1-.765 1.651c-.155.309-.318.634-.497 1.015-.514 1.094-1.04 1.822-1.45 2.283-.204.23-.378.393-.506.502a2.922 2.922 0 0 1-.202.157l-.016.01-.005.004-.003.002Zm-.543-.84-.001.001h.001Z"/></svg>');
+}
+
+:global(.webchat) .icon--thumb-down {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M10.578 10c.016.133.034.285.05.45.074.74.131 1.793-.013 2.677-.072.44-.201.887-.442 1.237-.257.372-.647.635-1.173.635-.516 0-.83-.37-1.024-.69-.192-.321-.36-.756-.533-1.201l-.013-.034c-.547-1.41-1.295-3.317-3.307-4.658a4.979 4.979 0 0 0-.853-.458c-.697-.289-1.322-1.057-1.157-1.936l.224-1.196a2 2 0 0 1 1.43-1.558l4.95-1.375a3.5 3.5 0 0 1 4.377 2.727l.454 2.419a2.5 2.5 0 0 1-2.458 2.96h-.512Zm1.533-5.196a2.5 2.5 0 0 0-3.126-1.948l-4.95 1.375a1 1 0 0 0-.716.78l-.224 1.195c-.053.283.162.664.558.828.31.129.659.306 1.025.55 2.287 1.524 3.128 3.696 3.676 5.108l.008.02c.19.49.329.844.472 1.082.069.115.12.17.151.195a.11.11 0 0 0 .016.01c.142 0 .245-.054.349-.203.118-.173.216-.451.278-.83.122-.75.077-1.697.005-2.417a16.374 16.374 0 0 0-.114-.897l-.009-.05-.002-.013v-.003A.5.5 0 0 1 10 9h1.09a1.5 1.5 0 0 0 1.475-1.777l-.454-2.419Z"/></svg>');
+}
+
+:global(.webchat) .icon--thumb-up-filled {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M9.58 1.052c-.75-.209-1.336.35-1.545.871-.24.6-.453 1.021-.706 1.524-.156.311-.328.654-.533 1.09-.475 1.01-.948 1.656-1.293 2.045a4.063 4.063 0 0 1-.405.402 1.92 1.92 0 0 1-.101.081l-.016.012L3.109 8.18a2 2 0 0 0-.856 2.426l.52 1.384a2 2 0 0 0 1.273 1.205l5.356 1.682a2.5 2.5 0 0 0 3.148-1.68l1.364-4.647a2 2 0 0 0-1.92-2.563H10.61c.066-.227.133-.479.195-.74.131-.562.243-1.203.232-1.738-.009-.497-.06-1.019-.264-1.462-.219-.475-.602-.832-1.192-.996ZM4.978 7.08l-.002.001.002-.001Z"/></svg>');
+}
+
+:global(.webchat) .icon--thumb-down-filled {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M13.094 4.62a3.5 3.5 0 0 0-4.377-2.727l-4.95 1.375a2 2 0 0 0-1.43 1.558l-.224 1.196c-.165.879.46 1.647 1.157 1.936.255.106.546.253.853.458 1.68 1.119 2.48 2.636 3.016 3.925.096.232.188.47.277.699.146.376.284.73.416 1.001.111.227.245.455.42.63.186.188.435.329.748.329.357 0 .666-.124.912-.34.235-.207.393-.481.502-.761.214-.554.281-1.251.29-1.893A14.73 14.73 0 0 0 10.577 10h.512a2.5 2.5 0 0 0 2.457-2.961l-.453-2.42Z"/></svg>');
+}
+
+:global(.webchat) .icon--download {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 31.8 46"><path fill="currentColor" d="m26.8 23.8-10.9 11L5 23.8l1.6-1.6 8.2 8.3V5H17v25.5l8.2-8.3 1.6 1.6zM5.8 41v-2.2H26V41H5.8z"/></svg>');
+}
+
+:global(.webchat) .icon--chevron {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M3.146 5.646a.5.5 0 0 1 .708 0L8 9.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 0-.708Z"/></svg>');
+}
+
+:global(.webchat) .icon--checkmark-circle {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14"><path fill="currentColor" d="M1 7a6 6 0 1 1 12 0A6 6 0 0 1 1 7m6-7a7 7 0 1 0 0 14A7 7 0 0 0 7 0m2.854 5.854a.5.5 0 0 0-.708-.708L6.25 8.043 4.854 6.646a.5.5 0 1 0-.708.708l1.75 1.75a.5.5 0 0 0 .708 0z"/></svg>');
+}
+
+:global(.webchat) .icon--unchecked-circle {
+  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14"><path fill="currentColor" d="M1 7a6 6 0 1 1 12 0A6 6 0 0 1 1 7m6-7a7 7 0 1 0 0 14A7 7 0 0 0 7 0z"/></svg>');
+}
+/* #endregion */

package/src/Icon/ComponentIcon.tsx

@@ -0,0 +1,59 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { literal, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import createIconComponent from '../Utils/createIconComponent';
+import styles from './ComponentIcon.module.css';
+
+const baseComponentIconPropsSchema = pipe(
+  object({
+    'aria-hidden': optional(literal('true')),
+    'aria-label': optional(string()),
+    className: optional(string()),
+    role: optional(string())
+  }),
+  readonly()
+);
+
+function BaseComponentIcon(props: InferInput<typeof baseComponentIconPropsSchema>) {
+  const {
+    className,
+    'aria-hidden': ariaHidden,
+    'aria-label': ariaLabel,
+    role
+  } = validateProps(baseComponentIconPropsSchema, props);
+
+  const classNames = useStyles(styles);
+
+  return (
+    <div
+      aria-hidden={ariaHidden}
+      aria-label={ariaLabel}
+      className={cx(classNames['component-icon'], className)}
+      role={role}
+    />
+  );
+}
+
+const { component: ComponentIcon, modifierPropsSchema: componentIconModifiersPropsSchema } = createIconComponent(
+  styles,
+  ['appearance', 'direction', 'icon'],
+  BaseComponentIcon
+);
+
+ComponentIcon.displayName = 'ComponentIcon';
+
+const componentIconPropsSchema = pipe(
+  object({
+    ...baseComponentIconPropsSchema.entries,
+    ...componentIconModifiersPropsSchema.entries
+  }),
+  readonly()
+);
+
+type ComponentIconProps = InferInput<typeof componentIconPropsSchema>;
+
+export default memo(ComponentIcon);
+export { componentIconPropsSchema, type ComponentIconProps };

package/src/Icon/index.ts

@@ -0,0 +1 @@
+export { default as ComponentIcon, componentIconPropsSchema } from './ComponentIcon';

package/src/LinkDefinition/LinkDefinitionItem.tsx

@@ -1,29 +1,52 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
 import React, { memo, useCallback, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
+import { custom, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import ItemBody from './private/ItemBody';
 import extractHostnameWithSubdomain from './private/extractHostnameWithSubdomain';
 
-type Props = Readonly<{
-  // The text (usually a number) displayed to the left of the item (e.g. "1")
-  identifier?: string;
+import styles from './LinkDefinitions.module.css';
 
-  // The main text of the citation. This will be formatted as if it were a link. If this is nullish and a URL exists, its host will be displayed instead.
-  text?: string;
+const linkDefinitionItemPropsSchema = pipe(
+  object({
+    // Displayed beneath the main link of the citation if it exists
+    badgeName: optional(string()),
 
-  // Displayed beneath the main link of the citation if it exists
-  badgeName?: string;
+    // Used as a tooltip and ARIA label for the item's displayed badgeName
+    badgeTitle: optional(string()),
 
-  // Used as a tooltip and ARIA label for the item's displayed badgeName
-  badgeTitle?: string;
+    // The text (usually a number) displayed to the left of the item (e.g. "1")
+    identifier: optional(string()),
 
-  // If the citation is an external link, this is its destination.
-  url?: string;
+    onClick: optional(
+      custom<(event: Pick<CustomEvent, 'defaultPrevented' | 'preventDefault' | 'type'>) => void>(
+        value => typeof value === 'function'
+      )
+    ),
 
-  onClick?: (event: Pick<CustomEvent, 'defaultPrevented' | 'preventDefault' | 'type'>) => void;
-}>;
+    // If the citation is an external link, this is its destination.
+    sanitizedHref: optional(string()),
+
+    // The main text of the citation. This will be formatted as if it were a link. If this is nullish and a URL exists, its host will be displayed instead.
+    text: optional(string())
+  }),
+  readonly()
+);
+
+type LinkDefinitionItemProps = InferInput<typeof linkDefinitionItemPropsSchema>;
+
+// eslint-disable-next-line prefer-arrow-callback
+const LinkDefinitionItem = memo(function LinkDefinitionItem(props: LinkDefinitionItemProps) {
+  const { badgeName, badgeTitle, identifier, onClick, sanitizedHref, text } = validateProps(
+    linkDefinitionItemPropsSchema,
+    props
+  );
+
+  const classNames = useStyles(styles);
 
-const LinkDefinitionItem = memo(({ badgeName, badgeTitle, identifier, onClick, text, url }: Props) => {
   const onClickRef = useRefFrom(onClick);
 
   const handleClick = useCallback<MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>>(
@@ -41,10 +64,15 @@ const LinkDefinitionItem = memo(({ badgeName, badgeTitle, identifier, onClick, t
     [onClickRef]
   );
 
-  return url ? (
+  return sanitizedHref ? (
+    // URL is sanitized.
+    // eslint-disable-next-line react/forbid-elements
     <a
-      className="webchat__link-definitions__list-item-box webchat__link-definitions__list-item-box--as-link"
-      href={url}
+      className={cx(
+        classNames['link-definitions__list-item-box'],
+        classNames['link-definitions__list-item-box--as-link']
+      )}
+      href={sanitizedHref}
       onClick={handleClick}
       rel="noopener noreferrer"
       target="_blank"
@@ -54,12 +82,15 @@ const LinkDefinitionItem = memo(({ badgeName, badgeTitle, identifier, onClick, t
         badgeTitle={badgeTitle}
         identifier={identifier}
         isExternal={true}
-        text={text || extractHostnameWithSubdomain(url)}
+        text={text || extractHostnameWithSubdomain(sanitizedHref)}
       />
     </a>
   ) : (
     <button
-      className="webchat__link-definitions__list-item-box webchat__link-definitions__list-item-box--as-button"
+      className={cx(
+        classNames['link-definitions__list-item-box'],
+        classNames['link-definitions__list-item-box--as-button']
+      )}
       onClick={handleClick}
       type="button"
     >
@@ -68,6 +99,5 @@ const LinkDefinitionItem = memo(({ badgeName, badgeTitle, identifier, onClick, t
   );
 });
 
-LinkDefinitionItem.displayName = 'LinkDefinitionItem';
-
 export default LinkDefinitionItem;
+export { linkDefinitionItemPropsSchema, type LinkDefinitionItemProps };