botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/ChatHistory/private/ScrollToEndButton.tsx

@@ -1,105 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import React, { Fragment, memo, MutableRefObject, useCallback, useMemo } from 'react';
-import { useAnimatingToEnd, useAtEnd, useScrollToEnd, useSticky } from 'react-scroll-to-bottom';
-import { useRefFrom } from 'use-ref-from';
-
-import useRenderingActivityKeys from '../../providers/RenderingActivities/useRenderingActivityKeys';
-import useFocusByActivityKey from '../../providers/TranscriptFocus/useFocusByActivityKey';
-
-const { useActivityKeysByRead, useCreateScrollToEndButtonRenderer, useMarkActivityKeyAsRead, useStyleOptions } = hooks;
-
-const useScrollToEndRenderResult = (terminatorRef: MutableRefObject<HTMLDivElement>) => {
-  const [renderingActivityKeys] = useRenderingActivityKeys();
-  const [sticky]: [boolean] = useSticky();
-  const [animatingToEnd]: [boolean] = useAnimatingToEnd();
-  const [atEnd]: [boolean] = useAtEnd();
-  const [, unreadActivityKeys] = useActivityKeysByRead();
-  const [styleOptions] = useStyleOptions();
-  const focusByActivityKey = useFocusByActivityKey();
-  const markActivityKeyAsRead = useMarkActivityKeyAsRead();
-  const scrollToEnd: (options?: ScrollToOptions) => void = useScrollToEnd();
-
-  // Acknowledged means either:
-  // 1. The user sent a message
-  //    - We don't need a condition here. When Web Chat sends the user's message, it will scroll to bottom, and it will trigger condition 2 below.
-  // 2. The user scroll to the bottom of the transcript, from a non-bottom scroll position
-  //    - If the transcript is already at the bottom, the user needs to scroll up and then go back down
-  //    - What happens if we are relaxing "scrolled from a non-bottom scroll position":
-  //      1. The condition will become solely "at the bottom of the transcript"
-  //      2. Auto-scroll will always scroll the transcript to the bottom
-  //      3. Web Chat will always acknowledge all activities as it is at the bottom
-  //      4. Acknowledge flag become useless
-  //      5. Therefore, even the developer set "pause after 3 activities", if activities are coming in at a slow pace (not batched in a single render)
-  //         Web Chat will keep scrolling and not snapped/paused
-
-  // Note: When Web Chat is loaded, there are no activities acknowledged. We need to assume all arriving activities are acknowledged until end-user sends their first activity.
-  //       Activities loaded initially could be from conversation history. Without assuming acknowledgement, Web Chat will not scroll initially (as everything is not acknowledged).
-  //       It would be better if the chat adapter should let Web Chat know if the activity is loaded from history or not.
-
-  // TODO: [P2] #3670 Move the "conversation history acknowledgement" logic mentioned above to polyfill of chat adapters.
-  //       1. Chat adapter should send "acknowledged" as part of "channelData"
-  //       2. If "acknowledged" is "undefined", we set it to:
-  //          a. true, if there are no egress activities yet
-  //          b. Otherwise, false
-
-  const renderingActivityKeysRef = useRefFrom(renderingActivityKeys);
-
-  // To prevent flashy button, we are not waiting for another render loop to update the `[readActivityKeys, unreadActivityKeys]` state.
-  // Instead, we are building the next one in this `useMemo` call.
-  const nextUnreadActivityKeys = useMemo(() => {
-    // This code need to be careful reviewed as it will cause another render. The code should be converging.
-    // After we call `markActivityKeyAsRead`, everything will be read and nothing will be unread.
-    // That means, in next render, `unreadActivityKeys` will be emptied and the `markActivityKeyAsRead` will not get called again.
-    if (sticky && unreadActivityKeys.length) {
-      markActivityKeyAsRead(unreadActivityKeys[unreadActivityKeys.length - 1]);
-
-      return [];
-    }
-
-    return unreadActivityKeys;
-  }, [markActivityKeyAsRead, sticky, unreadActivityKeys]);
-
-  const nextUnreadActivityKeysRef = useRefFrom(nextUnreadActivityKeys);
-
-  // If we are rendering anything that is unread, we should show the "New messages" button.
-  // Not everything in the `unreadActivityKeys` are rendered, say, bot typing indicator.
-  // We should not show the "New messages" button for bot typing indicator as it will confuse the user.
-  const unread = useMemo(
-    () => nextUnreadActivityKeys.some(key => renderingActivityKeys.includes(key)),
-    [renderingActivityKeys, nextUnreadActivityKeys]
-  );
-
-  const handleScrollToEndButtonClick = useCallback(() => {
-    scrollToEnd({ behavior: 'smooth' });
-
-    const { current: renderingActivityKeys } = renderingActivityKeysRef;
-
-    // After the "New message" button is clicked, focus on the first unread activity which will be rendered.
-    const firstUnreadRenderingActivityKey = nextUnreadActivityKeysRef.current.find(key =>
-      renderingActivityKeys.includes(key)
-    );
-
-    if (firstUnreadRenderingActivityKey) {
-      focusByActivityKey(firstUnreadRenderingActivityKey);
-    } else {
-      // If no unread activity, send the focus to the terminator block.
-      terminatorRef.current?.focus();
-    }
-  }, [focusByActivityKey, nextUnreadActivityKeysRef, renderingActivityKeysRef, scrollToEnd, terminatorRef]);
-
-  // According to tests no memo is expected here
-  const renderScrollToEndButton = useCreateScrollToEndButtonRenderer()({
-    atEnd: animatingToEnd || atEnd || sticky,
-    styleOptions,
-    unread
-  });
-
-  return renderScrollToEndButton && renderScrollToEndButton({ onClick: handleScrollToEndButtonClick });
-};
-
-function ScrollToEndButton({ terminatorRef }: Readonly<{ terminatorRef: MutableRefObject<HTMLDivElement> }>) {
-  const children = useScrollToEndRenderResult(terminatorRef);
-  return <Fragment>{children}</Fragment>;
-}
-
-export default memo(ScrollToEndButton);

package/src/ConnectivityStatus/Connecting.tsx

@@ -1,77 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import classNames from 'classnames';
-import React, { Fragment, memo, useState } from 'react';
-import { boolean, object, optional, pipe, readonly, type InferInput } from 'valibot';
-
-import useForceRender from '../hooks/internal/useForceRender';
-import useTimer from '../hooks/internal/useTimer';
-import useStyleSet from '../hooks/useStyleSet';
-import ScreenReaderText from '../ScreenReaderText';
-import SpinnerAnimation from './Assets/SpinnerAnimation';
-import WarningNotificationIcon from './Assets/WarningNotificationIcon';
-
-const { useDirection, useLocalizer, usePonyfill, useStyleOptions } = hooks;
-
-const connectivityStatusConnectingPropsSchema = pipe(
-  object({
-    reconnect: optional(boolean())
-  }),
-  readonly()
-);
-
-type ConnectivityStatusConnectingProps = InferInput<typeof connectivityStatusConnectingPropsSchema>;
-
-function ConnectivityStatusConnecting(props: ConnectivityStatusConnectingProps) {
-  const { reconnect = false } = validateProps(connectivityStatusConnectingPropsSchema, props);
-
-  const [{ Date }] = usePonyfill();
-  const [{ slowConnectionAfter }] = useStyleOptions();
-  const [
-    { connectivityNotification: connectivityNotificationStyleSet, warningNotification: warningNotificationStyleSet }
-  ] = useStyleSet();
-  const [direction] = useDirection();
-  const [initialRenderAt] = useState(() => Date.now());
-  const forceRender = useForceRender();
-  const localize = useLocalizer();
-
-  const initialConnectionText = localize('CONNECTIVITY_STATUS_ALT_CONNECTING');
-  const interruptedConnectionText = localize('CONNECTIVITY_STATUS_ALT_RECONNECTING');
-  const slowConnectionText = localize('CONNECTIVITY_STATUS_ALT_SLOW_CONNECTION');
-
-  useTimer(initialRenderAt + slowConnectionAfter, forceRender);
-
-  const now = Date.now();
-  const slow = now >= initialRenderAt + slowConnectionAfter;
-
-  return slow ? (
-    <Fragment>
-      <ScreenReaderText text={localize('CONNECTIVITY_STATUS_ALT', slowConnectionText)} />
-      <div
-        aria-hidden={true}
-        className={classNames('webchat__connectivityStatus', warningNotificationStyleSet + '')}
-        dir={direction}
-      >
-        <WarningNotificationIcon />
-        {slowConnectionText}
-      </div>
-    </Fragment>
-  ) : (
-    <Fragment>
-      <ScreenReaderText
-        text={localize('CONNECTIVITY_STATUS_ALT', reconnect ? interruptedConnectionText : initialConnectionText)}
-      />
-      <div
-        aria-hidden={true}
-        className={classNames('webchat__connectivityStatus', connectivityNotificationStyleSet + '')}
-        dir={direction}
-      >
-        <SpinnerAnimation />
-        {reconnect ? interruptedConnectionText : initialConnectionText}
-      </div>
-    </Fragment>
-  );
-}
-
-export default memo(ConnectivityStatusConnecting);
-export { connectivityStatusConnectingPropsSchema, type ConnectivityStatusConnectingProps };

package/src/Icon/ComponentIcon.module.css

@@ -1,113 +0,0 @@
-: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

@@ -1,59 +0,0 @@
-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

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

package/src/LinkDefinition/LinkDefinitions.module.css

@@ -1,209 +0,0 @@
-:global(.webchat) .link-definitions {
-  .link-definitions__header {
-    align-items: center;
-    cursor: default;
-    display: flex;
-    font-family: var(--webchat__font--primary);
-    font-size: var(--webchat__font-size--small);
-    gap: 4px;
-    justify-content: space-between;
-    list-style: none;
-
-    @media (forced-colors: none) {
-      color: #616161; /* TODO: Should we use subtle color instead? */
-    }
-
-    /* TODO: Temporarily disable dark theme until chat history support dark theme. */
-    @media (forced-colors: none) and (not (forced-colors: none)) {
-      color: #616161; /* TODO: Add dark theme color. */
-    }
-  }
-
-  .link-definitions__header-section {
-    align-items: center;
-    display: flex;
-    gap: 4px;
-    overflow: hidden;
-  }
-
-  .link-definitions__header-section--left {
-    flex-shrink: 0;
-  }
-
-  .link-definitions__header-text {
-    flex-shrink: 0;
-  }
-
-  .link-definitions__header::-webkit-details-marker {
-    display: none;
-  }
-
-  .link-definitions__header-chevron {
-    flex-shrink: 0;
-  }
-
-  &:not([open]) .link-definitions__header-chevron {
-    transform: rotate(-180deg);
-  }
-
-  .link-definitions__header-accessory {
-    overflow: hidden;
-  }
-
-  .link-definitions__message-sensitivity-label {
-    align-items: center;
-    display: flex;
-    gap: 4px;
-  }
-
-  .link-definitions__message-sensitivity-label-icon {
-    color: CanvasText;
-    flex-shrink: 0;
-  }
-
-  .link-definitions__message-sensitivity-label-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .link-definitions__list {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    margin: 4px 0 0;
-    padding: 0;
-  }
-
-  .link-definitions__list-item {
-    display: flex; /* This prevents the <button> from overflowing. Unsure why "overflow: hidden" doesn't work. */
-    flex-direction: column;
-  }
-
-  .link-definitions__badge {
-    align-self: flex-start;
-    border-radius: 4px;
-    border-style: solid;
-    border-width: 1px;
-    flex-shrink: 0;
-    font-size: 75%;
-    margin: 4px;
-    max-width: 4em;
-    min-width: 1em;
-    overflow: hidden;
-    padding: 2px;
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    @media (forced-colors: none) {
-      background-color: white;
-      border-color: #e0e0e0;
-      color: black;
-    }
-
-    /* TODO: Temporarily disable dark theme until chat history support dark theme. */
-    @media (forced-colors: none) and (not (forced-colors: none)) {
-      background-color: black;
-      border-color: #e0e0e0; /* TODO: Add dark theme color. */
-      color: white;
-    }
-
-    @media (forced-colors: active) {
-      border-color: buttonborder;
-    }
-  }
-
-  .link-definitions__list-item-box {
-    align-items: center;
-    border-radius: 4px;
-    border-style: solid;
-    border-width: 1px;
-
-    @media (forced-colors: none) {
-      background-color: white;
-      border-color: #d1d1d1;
-    }
-
-    /* TODO: Temporarily disable dark theme until chat history support dark theme. */
-    @media (forced-colors: none) and (not (forced-colors: none)) {
-      background-color: black;
-      border-color: #d1d1d1; /* TODO: Add dark theme color. */
-    }
-
-    @media (forced-colors: active) {
-      background-color: canvas;
-      border-color: buttonborder;
-    }
-  }
-
-  .link-definitions__list-item-box--as-link {
-    display: block;
-    outline-offset: 0; /* This will make sure focus indicator is same as <button>. */
-    text-decoration: none;
-  }
-
-  .link-definitions__list-item-box--as-button {
-    appearance: none;
-    background: transparent;
-    cursor: pointer;
-    font-family: inherit;
-    font-size: inherit;
-    overflow: hidden;
-    padding: 0;
-    text-align: initial; /* By default, texts inside button are centered. */
-  }
-
-  .link-definitions__list-item-body {
-    align-items: center;
-    display: flex;
-    font-family: Calibri, 'Helvetica Neue', Arial, sans-serif;
-    gap: 4px;
-    padding: 4px;
-  }
-
-  .link-definitions__list-item-body-main {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    overflow: hidden;
-  }
-
-  .link-definitions__list-item-main-text {
-    align-items: baseline;
-    display: flex;
-    gap: 4px;
-  }
-
-  .link-definitions__list-item-badge,
-  .link-definitions__list-item-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .link-definitions__list-item-text {
-    text-decoration: underline;
-
-    @media not (forced-colors: active) {
-      color: var(--webchat__color--accent);
-    }
-  }
-
-  .link-definitions__list-item-badge {
-    font-size: var(--webchat__font-size--small);
-
-    @media not (forced-colors: active) {
-      color: var(--webchat__color--subtle);
-    }
-  }
-
-  .link-definitions__open-in-new-window-icon {
-    flex-shrink: 0; /* When text is too long, make sure the chevron is not squeezed. */
-    padding-right: 4px; /* When text is too long and chevron is on far right, this will align the chevron so it's not too far. */
-
-    @media not (forced-colors: active) {
-      color: var(--webchat__color--accent);
-    }
-  }
-}