This is some text with a link in it. Also some text with formatting.
abcdef</p> +<li><math><mi//xlink:href="data:x,<script>alert(4)</script> +<li> +</ul> ` }, { diff --git a/src/app/ui/ActivityStatus/createActivityStatusMiddleware.tsx b/src/app/ui/ActivityStatus/createActivityStatusMiddleware.tsx deleted file mode 100644 index 159344d..0000000 --- a/src/app/ui/ActivityStatus/createActivityStatusMiddleware.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import ReactWebChat from 'botframework-webchat'; - -import ActivityStatus from './private/ActivityStatus'; - -import { type PropsOf } from '../../types/PropsOf'; - -type WebChatProps = PropsOf<typeof ReactWebChat>; -type ActivityStatusMiddleware = Exclude<WebChatProps['activityStatusMiddleware'], undefined>; - -const createActivityStatusMiddleware: () => ActivityStatusMiddleware = - () => - () => - next => - (...args) => { - const [{ activity }] = args; - const original = next(...args); - - return <ActivityStatus activity={activity}>{original}</ActivityStatus>; - }; - -export default createActivityStatusMiddleware; diff --git a/src/app/ui/ActivityStatus/private/ActivityStatus.tsx b/src/app/ui/ActivityStatus/private/ActivityStatus.tsx deleted file mode 100644 index 43542b5..0000000 --- a/src/app/ui/ActivityStatus/private/ActivityStatus.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { memo, type PropsWithChildren, type ReactNode, useMemo } from 'react'; - -import { type WebChatActivity } from 'botframework-webchat-core'; - -import { isReplyAction, type ReplyAction } from '../../../types/SchemaOrg/ReplyAction'; -import { isThing, type Thing } from '../../../types/SchemaOrg/Thing'; - -import Feedback from './Feedback/Feedback'; -import Originator from './Originator/Originator'; -import SlottedActivityStatus from './SlottedActivityStatus'; - -import { type ItemTypeOfArray } from '../../../types/ItemTypeOfArray'; -import { isVoteAction, type VoteAction } from '../../../types/SchemaOrg/VoteAction'; - -type WebChatEntity = ItemTypeOfArray<Exclude<WebChatActivity['entities'], undefined>>; - -type DownvoteAction = VoteAction & { actionOption: 'downvote' }; -type UpvoteAction = VoteAction & { actionOption: 'upvote' }; - -function isDownvoteAction(voteAction: VoteAction): voteAction is DownvoteAction { - return voteAction.actionOption === 'downvote'; -} - -function isUpvoteAction(voteAction: VoteAction): voteAction is UpvoteAction { - return voteAction.actionOption === 'upvote'; -} - -type Props = PropsWithChildren<{ activity: WebChatActivity }>; - -const ActivityStatus = memo(({ activity, children }: Props) => { - const entities = (activity.entities || []) as Array<Thing | WebChatEntity>; - - const replyAction = entities.find<ReplyAction>( - (entity): entity is ReplyAction => isThing(entity) && isReplyAction(entity) - ); - - const votes = useMemo( - () => - Object.freeze( - new Set( - entities - .filter<DownvoteAction | UpvoteAction>( - (entity): entity is DownvoteAction | UpvoteAction => - isThing(entity) && isVoteAction(entity) && (isDownvoteAction(entity) || isUpvoteAction(entity)) - ) - .map(({ actionOption }) => actionOption) - ) - ), - [entities] - ); - - // TODO: add localized labels for tooltips - - return ( - <SlottedActivityStatus> - {children} - {useMemo<ReactNode[]>( - () => - [ - replyAction && <Originator replyAction={replyAction} />, - votes.size && <Feedback votes={votes} downvoteTooltip={'Downvote'} upvoteTooltip={'Upvote'} /> - ].filter(Boolean), - [replyAction, votes] - )} - </SlottedActivityStatus> - ); -}); - -ActivityStatus.displayName = 'ActivityStatus'; - -export default ActivityStatus; diff --git a/src/app/ui/ActivityStatus/private/Feedback/Feedback.VoteButton.tsx b/src/app/ui/ActivityStatus/private/Feedback/Feedback.VoteButton.tsx deleted file mode 100644 index aaefeae..0000000 --- a/src/app/ui/ActivityStatus/private/Feedback/Feedback.VoteButton.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { memo, useCallback } from 'react'; -import { useRefFrom } from 'use-ref-from'; - -import ThumbsButton from './private/ThumbButton'; - -import { type Vote } from './types/Vote'; - -type Props = { - onClick?: (vote: Vote) => void; - pressed: boolean; - title?: string; - vote: Vote; -}; - -const FeedbackVoteButton = memo(({ onClick, pressed, title, vote }: Props) => { - const onClickRef = useRefFrom(onClick); - const voteRef = useRefFrom(vote); - - const handleClick = useCallback(() => onClickRef.current?.(voteRef.current), [onClickRef, voteRef]); - - return ( - <ThumbsButton - direction={vote === 'downvote' ? 'down' : 'up'} - onClick={handleClick} - pressed={pressed} - title={title} - /> - ); -}); - -FeedbackVoteButton.displayName = 'FeedbackVoteButton'; - -export default FeedbackVoteButton; diff --git a/src/app/ui/ActivityStatus/private/Feedback/Feedback.css b/src/app/ui/ActivityStatus/private/Feedback/Feedback.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/ui/ActivityStatus/private/Feedback/Feedback.tsx b/src/app/ui/ActivityStatus/private/Feedback/Feedback.tsx deleted file mode 100644 index 0afe212..0000000 --- a/src/app/ui/ActivityStatus/private/Feedback/Feedback.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { memo, type PropsWithChildren, useCallback, useState, useEffect, useRef } from 'react'; - -import FeedbackVoteButton from './Feedback.VoteButton'; - -import { type Vote } from './types/Vote'; - -type Props = PropsWithChildren<{ - downvoteTooltip: string; - upvoteTooltip: string; - votes: ReadonlySet<Vote>; -}>; - -const DEBOUNCE_TIMEOUT = 500; - -const Feedback = memo(({ downvoteTooltip, upvoteTooltip, votes }: Props) => { - const [value, setValue] = useState<Vote>('initial'); - - const handleChange = useCallback<(vote: Vote) => void>( - nextVote => setValue(vote => (nextVote === vote ? 'initial' : nextVote)), - [setValue] - ); - - const feedbackPayloadRef = useRef({}); - const postFeedback = console.log.bind(console); - - useEffect(() => { - // In the future, we should handle when the user "uncheck" the vote (`vote === 'unset'`). - if (value === 'downvote' || value === 'upvote') { - const timeout = setTimeout( - () => - postFeedback({ - ...feedbackPayloadRef.current, - category: 'gptanswers', - userResponse: value === 'downvote' ? 0 : 1 - }), - DEBOUNCE_TIMEOUT - ); - - return () => clearTimeout(timeout); - } - }, [feedbackPayloadRef, postFeedback, value]); - - return Array.from(votes).map(vote => ( - <FeedbackVoteButton - key={vote} - onClick={handleChange} - pressed={value === vote} - title={vote === 'downvote' ? downvoteTooltip : vote === 'upvote' ? upvoteTooltip : undefined} - vote={vote} - /> - )); -}); - -Feedback.displayName = 'ActivityStatusFeedback'; - -export default Feedback; diff --git a/src/app/ui/ActivityStatus/private/Feedback/private/ThumbButton.Image.tsx b/src/app/ui/ActivityStatus/private/Feedback/private/ThumbButton.Image.tsx deleted file mode 100644 index d02b288..0000000 --- a/src/app/ui/ActivityStatus/private/Feedback/private/ThumbButton.Image.tsx +++ /dev/null @@ -1,34 +0,0 @@ -/*! - * Copyright (C) Microsoft Corporation. All rights reserved. - */ - -import { memo } from 'react'; - -import ThumbDislike16Filled from './icons/ThumbDislike16Filled'; -import ThumbDislike16Regular from './icons/ThumbDislike16Regular'; -import ThumbLike16Filled from './icons/ThumbLike16Filled'; -import ThumbLike16Regular from './icons/ThumbLike16Regular'; - -type Props = { - className?: string; - direction: 'down' | 'up'; - filled?: boolean; -}; - -const ThumbButtonImage = memo(({ className, direction, filled = false }: Props) => - direction === 'down' ? ( - filled ? ( - <ThumbDislike16Filled className={className} /> - ) : ( - <ThumbDislike16Regular className={className} /> - ) - ) : filled ? ( - <ThumbLike16Filled className={className} /> - ) : ( - <ThumbLike16Regular className={className} /> - ) -); - -ThumbButtonImage.displayName = 'ThumbButtonImage'; - -export default ThumbButtonImage; diff --git a/src/app/ui/ActivityStatus/private/Feedback/private/ThumbButton.css b/src/app/ui/ActivityStatus/private/Feedback/private/ThumbButton.css deleted file mode 100644 index 7c2b403..0000000 --- a/src/app/ui/ActivityStatus/private/Feedback/private/ThumbButton.css +++ /dev/null @@ -1,60 +0,0 @@ -.webchat__thumb-button { - appearance: none; - background: Transparent; - border: 0; - border-radius: 2px; - height: 16px; - /* The Fluent icon is larger than the button. We need to clip it. - Without clipping, hover effect will appear on the edge of the button but not possible to click. */ - overflow: hidden; - padding: 0; - width: 16px; -} - -.webchat__thumb-button:active { - background: var(--pva__palette__neutral-light); -} - -.webchat__thumb-button:focus { - /* TODO: Verify with designer. This was #767676 (Gray ~120), this is now #8A8886 (Gray 110). */ - - border: solid 1px var(--pva__palette__neutral-secondary-alt); -} - -.webchat__thumb-button__image { - /* TODO: Remove "color" if we want a different hover color. */ - color: var(--pva__semantic-colors__link); - width: 14px; -} - -.webchat__thumb-button:hover - .webchat__thumb-button__image:not(.webchat__thumb-button__image--is-filled) { - display: none; -} - -.webchat__thumb-button--is-pressed - .webchat__thumb-button__image:not(.webchat__thumb-button__image--is-filled) { - display: none; -} - -.webchat__thumb-button:not(:hover):not(.webchat__thumb-button--is-pressed) - .webchat__thumb-button__image--is-filled { - display: none; -} - -/* TODO: We are commenting it out until designer confirm about the new palette. */ - -/* -.webchat__thumb-button--is-pressed .webchat__thumb-button__image--is-filled { - color: var(--pva__palette__theme-primary); -} - -.webchat__thumb-button__image:not(.webchat__thumb-button__image--is-filled) { - color: #6e6e6e; -} - -.webchat__thumb-button__image--is-filled { - /* TODO: Verify with designer. This was #C8C8C8, this is now #C8C6C4 (Gray 60). *-/ - color: var(--pva__palette__neutral-tertiary-alt); -} -*/ diff --git a/src/app/ui/ActivityStatus/private/Feedback/private/ThumbButton.tsx b/src/app/ui/ActivityStatus/private/Feedback/private/ThumbButton.tsx deleted file mode 100644 index 670bebb..0000000 --- a/src/app/ui/ActivityStatus/private/Feedback/private/ThumbButton.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/*! - * Copyright (C) Microsoft Corporation. All rights reserved. - */ - -import './ThumbButton.css'; - -import { memo } from 'react'; -import classNames from 'classnames'; - -import ThumbButtonImage from './ThumbButton.Image'; - -type Props = { - direction: 'down' | 'up'; - onClick?: () => void; - pressed?: boolean; - title?: string; -}; - -const ThumbButton = memo(({ direction, onClick, pressed, title }: Props) => ( - <button - aria-pressed={pressed} - className={classNames('webchat__thumb-button', { 'webchat__thumb-button--is-pressed': pressed })} - onClick={onClick} - title={title} - aria-label={title} - type="button" - > - <ThumbButtonImage - className={classNames('webchat__thumb-button__image webchat__thumb-button__image--is-down')} - direction={direction} - /> - <ThumbButtonImage - className={classNames( - 'webchat__thumb-button__image webchat__thumb-button__image--is-down webchat__thumb-button__image--is-filled' - )} - direction={direction} - filled={true} - /> - </button> -)); - -ThumbButton.displayName = 'ThumbButton'; - -export default ThumbButton; diff --git a/src/app/ui/ActivityStatus/private/Feedback/private/icons/ThumbDislike16Filled.tsx b/src/app/ui/ActivityStatus/private/Feedback/private/icons/ThumbDislike16Filled.tsx deleted file mode 100644 index 1f2ba3d..0000000 --- a/src/app/ui/ActivityStatus/private/Feedback/private/icons/ThumbDislike16Filled.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { memo } from 'react'; - -type Props = { className?: string }; - -const ThumbDislike16Filled = memo(({ className }: Props) => ( - <svg className={className} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path - d="M13.0939 4.61984C12.716 2.60391 10.6934 1.34358 8.71713 1.89254L3.76706 3.26756C3.03196 3.47175 2.47706 4.07638 2.33656 4.82627L2.11258 6.02165C1.94781 6.90105 2.5733 7.6693 3.26989 7.95815C3.5248 8.06386 3.81627 8.21111 4.1232 8.41574C5.80215 9.53503 6.60359 11.0523 7.13855 12.3413C7.23478 12.5731 7.32706 12.8106 7.41614 13.0399C7.56235 13.4162 7.69994 13.7703 7.83227 14.041C7.94336 14.2683 8.07685 14.4964 8.2515 14.6716C8.43773 14.8585 8.68676 14.9995 9.00016 14.9995C9.35735 14.9995 9.66579 14.8763 9.91159 14.6602C10.1473 14.453 10.3051 14.179 10.4137 13.8989C10.6282 13.3453 10.6952 12.648 10.7032 12.0058C10.7114 11.3524 10.6585 10.705 10.6045 10.2249C10.5955 10.1452 10.5865 10.0698 10.5776 9.99952H11.0903C12.6557 9.99952 13.836 8.57733 13.5475 7.03879L13.0939 4.61984Z" - fill="currentcolor" - /> - </svg> -)); - -ThumbDislike16Filled.displayName = 'ThumbDislike16Filled'; - -export default ThumbDislike16Filled; diff --git a/src/app/ui/ActivityStatus/private/Feedback/private/icons/ThumbDislike16Regular.tsx b/src/app/ui/ActivityStatus/private/Feedback/private/icons/ThumbDislike16Regular.tsx deleted file mode 100644 index a41d51d..0000000 --- a/src/app/ui/ActivityStatus/private/Feedback/private/icons/ThumbDislike16Regular.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { memo } from 'react'; - -type Props = { className?: string }; - -const ThumbDislike16Regular = memo(({ className }: Props) => ( - <svg className={className} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path - d="M10.5776 9.99952C10.5944 10.133 10.6119 10.2848 10.6283 10.45C10.7019 11.1893 10.7593 12.2428 10.6146 13.1274C10.5427 13.5666 10.4137 14.0141 10.1727 14.3636C9.91609 14.7357 9.52604 14.9995 9.00016 14.9995C8.48357 14.9995 8.16907 14.6298 7.97616 14.3084C7.78384 13.9879 7.61527 13.553 7.44271 13.1078L7.42958 13.0739C6.88287 11.6637 6.13522 9.75708 4.1232 8.41574C3.81627 8.21111 3.5248 8.06386 3.26989 7.95815C2.5733 7.6693 1.94781 6.90105 2.11258 6.02165L2.33656 4.82627C2.47706 4.07638 3.03196 3.47175 3.76706 3.26756L8.71713 1.89254C10.6934 1.34358 12.716 2.60391 13.0939 4.61984L13.5475 7.03879C13.836 8.57733 12.6557 9.99952 11.0903 9.99952H10.5776ZM12.1111 4.80413C11.8411 3.36418 10.3964 2.46395 8.98478 2.85605L4.03471 4.23107C3.66715 4.33317 3.38971 4.63549 3.31945 5.01043L3.09548 6.20582C3.04235 6.48935 3.2566 6.87007 3.65293 7.03442C3.96222 7.16268 4.31198 7.33974 4.67791 7.58369C6.9648 9.10828 7.80648 11.2795 8.35387 12.6916L8.36197 12.7124C8.55151 13.2014 8.69067 13.5556 8.83359 13.7938C8.90275 13.909 8.95439 13.9644 8.98519 13.9886C8.99329 13.995 8.99862 13.9981 9.00124 13.9995C9.14311 13.9992 9.24643 13.9453 9.3495 13.7959C9.46849 13.6233 9.56579 13.3445 9.62769 12.966C9.75044 12.2154 9.70484 11.2689 9.63323 10.549C9.60484 10.2636 9.57314 10.0209 9.54862 9.85016C9.53637 9.76485 9.52595 9.69769 9.51867 9.65235L9.51029 9.60123L9.50819 9.58884L9.50772 9.58609C9.48227 9.44064 9.52236 9.29093 9.61735 9.17788C9.66884 9.11659 9.73358 9.06935 9.8056 9.03892C9.86646 9.01321 9.93252 8.99952 10.0002 8.99952H11.0903C12.0295 8.99952 12.7377 8.1462 12.5646 7.22308L12.1111 4.80413Z" - fill="currentcolor" - /> - </svg> -)); - -ThumbDislike16Regular.displayName = 'ThumbDislike16Regular'; - -export default ThumbDislike16Regular; diff --git a/src/app/ui/ActivityStatus/private/Feedback/private/icons/ThumbLike16Filled.tsx b/src/app/ui/ActivityStatus/private/Feedback/private/icons/ThumbLike16Filled.tsx deleted file mode 100644 index 5e06bd4..0000000 --- a/src/app/ui/ActivityStatus/private/Feedback/private/icons/ThumbLike16Filled.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { memo } from 'react'; - -type Props = { className?: string }; - -const ThumbLike16Filled = memo(({ className }: Props) => ( - <svg className={className} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path - d="M9.5806 1.0516C8.83006 0.843 8.24411 1.40248 8.03494 1.92332C7.79411 2.52303 7.58243 2.94395 7.32941 3.44707C7.17287 3.75833 7.00052 4.10106 6.79565 4.53704C6.32141 5.54625 5.84755 6.19347 5.5035 6.58154C5.33128 6.77579 5.19093 6.90585 5.09835 6.98435C5.05204 7.02362 5.01761 7.05005 4.99704 7.0652L4.9809 7.07684L3.109 8.18119C2.27244 8.67473 1.91142 9.69797 2.25304 10.6072L2.77304 11.9912C2.98944 12.5671 3.45891 13.0114 4.04591 13.1958L9.40179 14.8781C10.7365 15.2974 12.1555 14.5397 12.5497 13.1973L13.9139 8.55127C14.29 7.2705 13.3298 5.9878 11.9949 5.9878H10.6099C10.6759 5.76117 10.7434 5.50906 10.8047 5.24751C10.9361 4.68641 11.0478 4.04484 11.0375 3.51008C11.028 3.01293 10.9778 2.49126 10.7735 2.04807C10.5544 1.57258 10.1709 1.21566 9.5806 1.0516ZM4.9768 7.07969L4.97492 7.08097L4.9768 7.07969Z" - fill="currentcolor" - /> - </svg> -)); - -ThumbLike16Filled.displayName = 'ThumbLike16Filled'; - -export default ThumbLike16Filled; diff --git a/src/app/ui/ActivityStatus/private/Feedback/private/icons/ThumbLike16Regular.tsx b/src/app/ui/ActivityStatus/private/Feedback/private/icons/ThumbLike16Regular.tsx deleted file mode 100644 index 62e9078..0000000 --- a/src/app/ui/ActivityStatus/private/Feedback/private/icons/ThumbLike16Regular.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { memo } from 'react'; - -type Props = { className?: string }; - -const ThumbLike16Regular = memo(({ className }: Props) => ( - <svg className={className} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path - d="M8.03494 1.92332C8.24411 1.40248 8.83006 0.843 9.5806 1.0516C10.1709 1.21566 10.5544 1.57258 10.7735 2.04807C10.9778 2.49126 11.028 3.01293 11.0375 3.51008C11.0478 4.04484 10.9361 4.68641 10.8047 5.24751C10.7434 5.50906 10.6759 5.76117 10.6099 5.9878H11.9949C13.3298 5.9878 14.29 7.2705 13.9139 8.55127L12.5497 13.1973C12.1555 14.5397 10.7365 15.2974 9.40179 14.8781L4.04591 13.1958C3.45891 13.0114 2.98944 12.5671 2.77304 11.9912L2.25304 10.6072C1.91142 9.69797 2.27244 8.67473 3.109 8.18119L4.98089 7.07684C4.98462 7.07423 4.99002 7.07037 4.99704 7.0652C5.01761 7.05005 5.05204 7.02362 5.09835 6.98435C5.19093 6.90585 5.33128 6.77579 5.5035 6.58154C5.84755 6.19347 6.32141 5.54625 6.79565 4.53704C7.00052 4.10106 7.17287 3.75833 7.32941 3.44707C7.58243 2.94395 7.79411 2.52303 8.03494 1.92332ZM5.51946 7.91969C5.51378 7.92334 5.50805 7.9269 5.50224 7.93032L3.61713 9.04247C3.19885 9.28924 3.01834 9.80086 3.18915 10.2555L3.70914 11.6394C3.81735 11.9274 4.05208 12.1496 4.34558 12.2418L9.70146 13.9241C10.5023 14.1756 11.3537 13.721 11.5902 12.9156L12.9544 8.26953C13.1424 7.62915 12.6623 6.9878 11.9949 6.9878H9.92587C9.76349 6.9878 9.61122 6.90894 9.51751 6.77632C9.42381 6.64369 9.40035 6.47382 9.4546 6.32077C9.55458 6.03869 9.70672 5.54998 9.83103 5.01941C9.95711 4.48125 10.0456 3.93709 10.0377 3.52931C10.0287 3.061 9.97907 2.71335 9.86536 2.46667C9.76654 2.25227 9.61384 2.09874 9.31282 2.01508C9.26971 2.0031 9.21948 2.0066 9.15353 2.04989C9.08149 2.09718 9.00781 2.18417 8.96291 2.29598C8.70922 2.92772 8.46651 3.41157 8.19787 3.94711C8.04311 4.25564 7.87974 4.58133 7.7007 4.96233C7.18681 6.05594 6.66067 6.78372 6.25176 7.24494C6.04749 7.47534 5.87312 7.6385 5.74509 7.74707C5.68109 7.80133 5.62875 7.84188 5.59013 7.87034C5.57082 7.88456 5.55495 7.89575 5.54277 7.90411L5.5273 7.91456L5.52171 7.91823L5.51946 7.91969ZM4.97612 7.08018L4.97492 7.08097L4.97612 7.08018Z" - fill="currentcolor" - /> - </svg> -)); - -ThumbLike16Regular.displayName = 'ThumbLike16Regular'; - -export default ThumbLike16Regular; diff --git a/src/app/ui/ActivityStatus/private/Feedback/types/Vote.ts b/src/app/ui/ActivityStatus/private/Feedback/types/Vote.ts deleted file mode 100644 index 5d8d546..0000000 --- a/src/app/ui/ActivityStatus/private/Feedback/types/Vote.ts +++ /dev/null @@ -1 +0,0 @@ -export type Vote = 'downvote' | 'error' | 'initial' | 'upvote'; diff --git a/src/app/ui/ActivityStatus/private/Originator/Originator.css b/src/app/ui/ActivityStatus/private/Originator/Originator.css deleted file mode 100644 index b336fc9..0000000 --- a/src/app/ui/ActivityStatus/private/Originator/Originator.css +++ /dev/null @@ -1,33 +0,0 @@ -/* .pva-web-chat__provenance { - color: var(--pva__accent-color); - font-family: Calibri, 'Helvetica Neue', Arial, 'sans-serif'; - font-size: 80%; - padding-top: 5px; -} */ - -.webchat__originator-activity-status { - align-items: center; - /* These are the fonts used in Web Chat default style options. */ - font-family: Calibri, 'Helvetica Neue', Arial, sans-serif; - font-size: 80%; - padding: 1px 1px 2px 1px; -} - -.webchat__originator-activity-status--link { - color: var(--pva__accent-color); - /* color: var(--pva__semantic-colors__link); */ -} - -.webchat__originator-activity-status--link:hover { - color: var(--pva__semantic-colors--link-hovered); -} - -.webchat__originator-activity-status--link-hint { - color: transparent; - height: 1px; - overflow: hidden; - position: absolute; - top: 0; - white-space: nowrap; - width: 1px; -} diff --git a/src/app/ui/ActivityStatus/private/Originator/Originator.tsx b/src/app/ui/ActivityStatus/private/Originator/Originator.tsx deleted file mode 100644 index c96e648..0000000 --- a/src/app/ui/ActivityStatus/private/Originator/Originator.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import './Originator.css'; - -import { memo } from 'react'; - -import { type ReplyAction } from '../../../../types/SchemaOrg/ReplyAction'; - -type Props = { replyAction: ReplyAction }; - -const Originator = memo(({ replyAction }: Props) => { - const text = replyAction.description || replyAction.provider?.name; - - return replyAction.provider?.url ? ( - <a - className="webchat__originator-activity-status webchat__originator-activity-status--link" - href={replyAction.provider?.url} - rel="noopener noreferrer" - target="_blank" - > - {text} - </a> - ) : ( - <span className="webchat__originator-activity-status">{text}</span> - ); -}); - -Originator.displayName = 'Originator'; - -export default Originator; diff --git a/src/app/ui/ActivityStatus/private/SlottedActivityStatus.css b/src/app/ui/ActivityStatus/private/SlottedActivityStatus.css deleted file mode 100644 index 412cb2f..0000000 --- a/src/app/ui/ActivityStatus/private/SlottedActivityStatus.css +++ /dev/null @@ -1,5 +0,0 @@ -.webchat__slotted-activity-status { - align-items: center; - display: flex; - gap: 4px; -} diff --git a/src/app/ui/ActivityStatus/private/SlottedActivityStatus.tsx b/src/app/ui/ActivityStatus/private/SlottedActivityStatus.tsx deleted file mode 100644 index cfa2a1e..0000000 --- a/src/app/ui/ActivityStatus/private/SlottedActivityStatus.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import './SlottedActivityStatus.css'; - -import { Children, Fragment, memo, type PropsWithChildren } from 'react'; -import classNames from 'classnames'; - -type Props = PropsWithChildren<{ - className?: string; -}>; - -const SlottedActivityStatus = memo(({ children, className }: Props) => ( - <span className={classNames('webchat__slotted-activity-status', className)}> - {Children.map(children, (child, index) => - index ? ( - <Fragment> - {'|'} - {child} - </Fragment> - ) : ( - child - ) - )} - </span> -)); - -SlottedActivityStatus.displayName = 'SlottedActivityStatus'; - -export default SlottedActivityStatus; diff --git a/src/app/ui/Chat.tsx b/src/app/ui/Chat.tsx index eb60040..a3071c1 100644 --- a/src/app/ui/Chat.tsx +++ b/src/app/ui/Chat.tsx @@ -4,14 +4,14 @@ import { css } from '@emotion/css'; import { Components, createStore, hooks } from 'botframework-webchat'; import { memo, useEffect, useMemo, useState } from 'react'; -// import ActivityWithReferences from './ActivityWithReferences'; -import CitationWindowProvider from './CitationWindowProvider/CitationWindowProvider'; -import createActivityStatusMiddleware from './ActivityStatus/createActivityStatusMiddleware'; -// @ts-expect-error 7016 +// @ts-expect-error "createDirectLineEmulator" is not typed. import createDirectLineEmulator from '../createDirectLineEmulator'; -import MarkdownTextActivity from './MarkdownTextActivity/MarkdownTextActivity'; +import TextAttachment from './external/component/Attachment/Text/TextAttachment'; import { type PropsOf } from '../types/PropsOf'; +import { WebChatAttachment } from './external/component/Attachment/private/types/WebChatAttachment'; +import ModalDialogComposer from './external/component/providers/ModalDialog/ModalDialogComposer'; +import renderMarkdownAsHTML from './external/bundle/renderMarkdown/renderMarkdownAsHTML'; const { BasicWebChat, Composer } = Components; const { useStyleOptions } = hooks; @@ -38,6 +38,12 @@ const _Chat = memo(function () { return <BasicWebChat className={className} />; }); +function isTextAttachment( + attachment: WebChatAttachment +): attachment is WebChatAttachment & { contentType: `text/${string}` } { + return attachment.contentType.startsWith('text/'); +} + export default memo(function Chat({ activity }: Props) { const [ready, setReady] = useState(false); const store = useMemo( @@ -59,68 +65,55 @@ export default memo(function Chat({ activity }: Props) { activity && ready && directLine.emulateIncomingActivity(activity); }, [activity, directLine, ready]); - // Commented out for now... if we need to use activity middleware, instead of attachment middleware, here is the code. - // Note the activity middleware will render the timestamp, thus, the reference links will be shown *below* the timestamp, which may not be desirable. - // const activityMiddleware = useMemo<ActivityMiddleware>(() => { - // return () => - // next => - // (...args) => { - // const [{ activity }] = args; - - // const original = next(...args); - - // if (activity.type === 'message') { - // return (renderAttachment, props) => ( - // <ActivityWithReferences activity={activity}> - // {original && original(renderAttachment, props)} - // </ActivityWithReferences> - // ); - // } - - // return original; - // }; - // }, []); - const attachmentMiddleware = useMemo<AttachmentMiddleware>(() => { return () => next => (...args) => { - const original = next(...args); - - const activity = args[0]?.activity; - - // When should we use the middleware with a new/tweaked Markdown engine? - // - Must be a message from bot - // - Must be a Markdown message - // - Must be a generative answer (i.e. check bot entity) - if ( - activity && - activity.from.role === 'bot' && - activity.type === 'message' && - (!activity.textFormat || activity.textFormat === 'markdown') && - activity.entities?.find(entity => '@context' in entity) - ) { - return <MarkdownTextActivity activity={activity}>{original}</MarkdownTextActivity>; + if (!args?.[0]) { + return next(...args); } - return original; + const [ + { + activity, + activity: { from: { role = undefined } = {} } = {}, + attachment, + attachment: { contentType = undefined, contentUrl = undefined, thumbnailUrl = undefined } = {} + } + ] = args; + + const isText = isTextAttachment(attachment); + + return (isText ? !attachment.content : role === 'user' && !thumbnailUrl) ? ( + next(...args) + ) : /^audio\//u.test(contentType || '') ? ( + next(...args) + ) : /^image\//u.test(contentType || '') ? ( + next(...args) + ) : /^video\//u.test(contentType || '') ? ( + next(...args) + ) : contentUrl || contentType === 'application/octet-stream' ? ( + next(...args) + ) : isText ? ( + <TextAttachment activity={activity} attachment={attachment} /> + ) : ( + next(...args) + ); }; }, []); - const activityStatusMiddleware = useMemo(createActivityStatusMiddleware, []); - return ( <div className="chat"> <Composer - // activityMiddleware={activityMiddleware} - activityStatusMiddleware={activityStatusMiddleware} attachmentMiddleware={attachmentMiddleware} directLine={directLine} + // TODO: Comment out "renderMarkdown" to see what's Web Chat today's behavior. + renderMarkdown={renderMarkdownAsHTML} store={store} > - <CitationWindowProvider> + <ModalDialogComposer> <_Chat /> - </CitationWindowProvider> + </ModalDialogComposer> </Composer> </div> ); diff --git a/src/app/ui/CitationWindowProvider/CitationWindowProvider.tsx b/src/app/ui/CitationWindowProvider/CitationWindowProvider.tsx deleted file mode 100644 index 036011e..0000000 --- a/src/app/ui/CitationWindowProvider/CitationWindowProvider.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { memo, type ReactNode, useCallback, useMemo, useState } from 'react'; - -import CitationWindow from './private/CitationWindow'; -import CitationWindowContext from './private/CitationWindowContext'; - -import { type ClaimWithText } from './private/types/ClaimWithText'; -import { type ContextOf } from '../../types/ContextOf'; - -type Context = ContextOf<typeof CitationWindowContext>; - -type Props = { - children?: ReactNode | undefined; -}; - -export default memo(function CitationWindowProvider({ children }: Props) { - const [showingClaim, setShowingClaim] = useState<ClaimWithText | undefined>(); - - const handleClose = useCallback(() => { - setShowingClaim(undefined); - }, [setShowingClaim]); - - const show = useCallback<Context['show']>(claim => setShowingClaim(claim), [setShowingClaim]); - - const context = useMemo<Context>(() => ({ show }), [show]); - - return ( - <CitationWindowContext.Provider value={context}> - {children} - {showingClaim && <CitationWindow onClose={handleClose} text={showingClaim.text} title={showingClaim.name} />} - </CitationWindowContext.Provider> - ); -}); diff --git a/src/app/ui/CitationWindowProvider/private/CitationWindow.css b/src/app/ui/CitationWindowProvider/private/CitationWindow.css deleted file mode 100644 index 921f445..0000000 --- a/src/app/ui/CitationWindowProvider/private/CitationWindow.css +++ /dev/null @@ -1,86 +0,0 @@ -xdiv .mainWindow { - position: absolute; - top: 32px; - left: 32px; - bottom: 32px; - right: 32px; - background-color: #ffffff; - border: 0.5px solid black; - border-radius: 4px; - box-shadow: 8px 8px 8px rgba(0.5, 0.5, 0.5, 0.5); - font-family: Calibri, 'Helvetica Neue', Arial, 'sans-serif'; - padding: 8px; - display: flex; - flex-direction: column; - word-wrap: normal; - overflow-y: scroll; -} - -div > button.closeBox { - align-self: end; - border-width: 0px; - background-color: transparent; - font-size: 1.5em; - max-height: 1.25em; - min-width: 1em; -} - -div > button.closeBox:focus { - border: 2px solid black; - border-radius: 8px; -} - -span.contents a { - text-decoration: underline; -} -span.contents a::before { - content: ''; -} -span.contents a::after { - content: ''; -} - -.webchat__popover { - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; -} - -.webchat__popover__box { - background-color: White; - border-radius: 4px; - box-shadow: - 0 6.4px 14.4px 0 #00000021, - 0 1.2px 3.6px 0 #0000001a; - box-sizing: border-box; - font-family: Calibri, 'Helvetica Neue', Arial, 'sans-serif'; - height: calc(100% - 20px); - margin: 10px; - overflow-y: auto; - padding: 16px; - top: 0; - width: calc(100% - 20px); -} - -.webchat__popover__close-button { - appearance: none; - background: transparent; - border: 0; - float: right; - padding: 0; - right: 0; - max-height: 1.5em; -} - -.webchat__popover__header { - display: flex; - flex-direction: row-reverse; - align-items: center; - justify-content: space-between; -} - -.webchat__popover__title { - max-width: calc(100% - 32px); -} \ No newline at end of file diff --git a/src/app/ui/CitationWindowProvider/private/CitationWindow.tsx b/src/app/ui/CitationWindowProvider/private/CitationWindow.tsx deleted file mode 100644 index 19a541c..0000000 --- a/src/app/ui/CitationWindowProvider/private/CitationWindow.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { css } from '@emotion/css'; -import { FocusTrapZone } from '@fluentui/react/lib/FocusTrapZone'; -import { hooks } from 'botframework-webchat'; -import { useMemo } from 'react'; - -import Dismiss16Regular from './Dismiss16Regular'; - -import './CitationWindow.css'; - -type Props = { - text: string; - title?: string; - onClose: () => void; -}; - -const { useLocalizer, useRenderMarkdownAsHTML, useStyleOptions } = hooks; - -const CitationWindow = ({ text, title, onClose: handleClose }: Props) => { - const [styleOptions] = useStyleOptions(); - const renderMarkdownAsHTML = useRenderMarkdownAsHTML(); - - const citationWindowOverrides = useMemo( - () => - css({ - '--pva__accent-color': styleOptions.accent, - '--pva__external-link-icon': styleOptions.markdownExternalLinkIconImage - }), - [styleOptions.accent] - ); - - const localize = useLocalizer(); - - const externalLinkAlt = localize('MARKDOWN_EXTERNAL_LINK_ALT'); - - return ( - <div className="mainWindow webchat__popover"> - <FocusTrapZone className="webchat__popover__box" firstFocusableTarget={'.closeBox'}> - <span className="webchat__popover__header"> - <button - aria-label={'TODO: XXX close citation window XXX'} - className="webchat__popover__close-button" - onClick={handleClose} - > - <Dismiss16Regular /> - </button> - {title && <h2 className="webchat__popover__title">{title}</h2>} - </span> - - <span - className={['contents', citationWindowOverrides].join(' ')} - dangerouslySetInnerHTML={{ - __html: renderMarkdownAsHTML(text ?? '', styleOptions, { externalLinkAlt }) - }} - /> - </FocusTrapZone> - </div> - ); -}; - -export default CitationWindow; diff --git a/src/app/ui/CitationWindowProvider/private/CitationWindowContext.ts b/src/app/ui/CitationWindowProvider/private/CitationWindowContext.ts deleted file mode 100644 index 5ec35b1..0000000 --- a/src/app/ui/CitationWindowProvider/private/CitationWindowContext.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { createContext } from 'react'; - -import { type ClaimWithText } from './types/ClaimWithText'; - -type ContextType = { - show(claim: ClaimWithText): void; -}; - -const CitationWindowContext = createContext<ContextType>({ - get show(): () => void { - throw new Error('This property cannot be accessed outside of <CitationWindowProvider>.'); - } -}); - -export default CitationWindowContext; diff --git a/src/app/ui/CitationWindowProvider/private/Dismiss16Regular.tsx b/src/app/ui/CitationWindowProvider/private/Dismiss16Regular.tsx deleted file mode 100644 index 1ebfa7a..0000000 --- a/src/app/ui/CitationWindowProvider/private/Dismiss16Regular.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { memo } from 'react'; - -type Props = { className?: string }; - -const Dismiss16Regular = memo(({ className }: Props) => ( - <svg className={className} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path - d="M2.58859 2.71569L2.64645 2.64645C2.82001 2.47288 3.08944 2.4536 3.28431 2.58859L3.35355 2.64645L8 7.293L12.6464 2.64645C12.8417 2.45118 13.1583 2.45118 13.3536 2.64645C13.5488 2.84171 13.5488 3.15829 13.3536 3.35355L8.707 8L13.3536 12.6464C13.5271 12.82 13.5464 13.0894 13.4114 13.2843L13.3536 13.3536C13.18 13.5271 12.9106 13.5464 12.7157 13.4114L12.6464 13.3536L8 8.707L3.35355 13.3536C3.15829 13.5488 2.84171 13.5488 2.64645 13.3536C2.45118 13.1583 2.45118 12.8417 2.64645 12.6464L7.293 8L2.64645 3.35355C2.47288 3.17999 2.4536 2.91056 2.58859 2.71569L2.64645 2.64645L2.58859 2.71569Z" - fill="currentcolor" - /> - </svg> -)); - -Dismiss16Regular.displayName = 'Dismiss16Regular'; - -export default Dismiss16Regular; diff --git a/src/app/ui/CitationWindowProvider/private/types/ClaimWithText.ts b/src/app/ui/CitationWindowProvider/private/types/ClaimWithText.ts deleted file mode 100644 index 3ca4dfa..0000000 --- a/src/app/ui/CitationWindowProvider/private/types/ClaimWithText.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Claim } from '../../../../types/SchemaOrg/Claim'; - -export type ClaimWithText = Claim & { text: string }; diff --git a/src/app/ui/CitationWindowProvider/private/useCitationWindowContext.ts b/src/app/ui/CitationWindowProvider/private/useCitationWindowContext.ts deleted file mode 100644 index 8d646ac..0000000 --- a/src/app/ui/CitationWindowProvider/private/useCitationWindowContext.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { useContext } from 'react'; - -import CitationWindowContext from './CitationWindowContext'; - -import type { ContextOf } from '../../../types/ContextOf'; - -export default function useCitationWindowContext(): ContextOf<typeof CitationWindowContext> { - return useContext(CitationWindowContext); -} diff --git a/src/app/ui/CitationWindowProvider/useShowCitationWindow.ts b/src/app/ui/CitationWindowProvider/useShowCitationWindow.ts deleted file mode 100644 index e4d3ea4..0000000 --- a/src/app/ui/CitationWindowProvider/useShowCitationWindow.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { useContext } from 'react'; - -import CitationWindowContext from './private/CitationWindowContext'; - -import { type ContextOf } from '../../types/ContextOf'; - -type Context = ContextOf<typeof CitationWindowContext>; - -export default function useShowCitationWindow(): Context['show'] { - const context = useContext(CitationWindowContext); - - return context.show; -} diff --git a/src/app/ui/MarkdownTextActivity/MarkdownTextActivity.css b/src/app/ui/MarkdownTextActivity/MarkdownTextActivity.css deleted file mode 100644 index fdec03f..0000000 --- a/src/app/ui/MarkdownTextActivity/MarkdownTextActivity.css +++ /dev/null @@ -1,33 +0,0 @@ -.webchat__bot-text-activity__link::after { - content: ']'; -} - -.webchat__bot-text-activity__link::before { - content: '['; -} - -.webchat__bot-text-activity__link--citation { - appearance: none; - border: 0; - background-color: transparent; - color: var(--pva__accent-color); - cursor: pointer; - font-family: inherit; - font-size: inherit; - padding: 0; - white-space: nowrap; -} - -.webchat__bot-text-activity__link--url { - color: var(--pva__accent-color); - text-decoration: none; -} - -.pva__generative-answer-markdown__external-icon { - -webkit-mask-image: var(--pva__external-link-icon); - mask-image: var(--pva__external-link-icon); - background-color: LinkText; - height: 0.75em; - margin: 0 0.1em; - width: 0.75em !important; /* Web Chat maximize <img>, we should fix it there */ -} diff --git a/src/app/ui/MarkdownTextActivity/MarkdownTextActivity.tsx b/src/app/ui/MarkdownTextActivity/MarkdownTextActivity.tsx deleted file mode 100644 index 39942fd..0000000 --- a/src/app/ui/MarkdownTextActivity/MarkdownTextActivity.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import './MarkdownTextActivity.css'; - -import { Fragment, memo, type MouseEventHandler, type PropsWithChildren, useCallback, useMemo } from 'react'; -import { hooks } from 'botframework-webchat'; -import classNames from 'classnames'; - -import { type Claim, isClaim, hasText } from '../../types/SchemaOrg/Claim'; -import { type Thing, isThing } from '../../types/SchemaOrg/Thing'; -import getClaimsFromMarkdown from './private/getClaimsFromMarkdown'; -import getURLProtocol from './private/getURLProtocol'; -import isHTMLButtonElement from './private/LinkDefinitions/private/isHTMLButtonElement'; -import LinkDefinitions from '../MarkdownTextActivity/private/LinkDefinitions/LinkDefinitions'; -import renderMarkdownAsHTML from './private/renderMarkdownAsHTML'; -import useShowCitationWindow from '../CitationWindowProvider/useShowCitationWindow'; - -import { type ItemTypeOfArray } from '../../types/ItemTypeOfArray'; -import { type PropsOf } from '../../types/PropsOf'; -import { type WebChatActivity } from 'botframework-webchat-core'; - -const { useLocalizer, useStyleOptions, useStyleSet } = hooks; - -type WebChatEntity = ItemTypeOfArray<Exclude<WebChatActivity['entities'], undefined>>; - -type Props = PropsWithChildren<{ - activity: WebChatActivity & - // tl;dr must be a Markdown message - (| { - type: 'message'; - } - | { - textFormat: 'markdown' | undefined; - type: 'message'; - } - ); -}>; - -type OnCitationClick = PropsOf<typeof LinkDefinitions>['onCitationClick']; - -const MarkdownTextActivity = memo(({ activity }: Props) => { - const { text } = activity; - const entities = (activity.entities || []) as Array<Thing | WebChatEntity>; - const showCitationWindow = useShowCitationWindow(); - - // Citations are claim with text. - // We are building a map for quick lookup. - const citationMap = useMemo<Map<string, Claim & { text: string }>>( - () => - entities.reduce<Map<string, Claim & { text: string }>>((citationMap, entity) => { - if (isThing(entity) && isClaim(entity) && hasText(entity) && entity['@id']) { - return citationMap.set(entity['@id'], entity); - } - - return citationMap; - }, new Map()), - [entities] - ); - - // These are all the claims, including citation (claim with text) and links (claim without text but URL). - const claims = useMemo(() => Object.freeze(text ? Array.from(getClaimsFromMarkdown(text, citationMap)) : []), [text]); - - // Handles all clicks on citation inside Markdown text. - const handleMarkdownCitationClick = useCallback<MouseEventHandler<HTMLDivElement>>(({ target }) => { - // Find out what <button> is being clicked. - const targetElement = target as HTMLElement; - const buttonElement: HTMLButtonElement | undefined = isHTMLButtonElement(targetElement) - ? targetElement - : (targetElement.closest('button') as HTMLButtonElement | undefined); - - if (!buttonElement) { - return; - } - - // <button data-webchat-citation-href="cite:1">1</button> - const href = buttonElement.dataset.webchatCitationHref; - - if (!href || getURLProtocol(href) !== 'cite:') { - return; - } - - const claim = citationMap.get(href); - - if (claim && hasText(claim)) { - showCitationWindow(claim); - } - }, []); - - // Handles all clicks on citation in the reference list. - const handleReferencesCitationClick = useCallback<Exclude<OnCitationClick, undefined>>( - claim => showCitationWindow(claim), - [showCitationWindow] - ); - - // --- Separate out the section below. The following code are forked/adopted. --- - // TODO: Unfork the code. - - const [{ textContent: textContentStyleSet }] = useStyleSet(); - const [styleOptions] = useStyleOptions(); - const localize = useLocalizer(); - - const externalLinkAlt = localize('MARKDOWN_EXTERNAL_LINK_ALT'); - - return ( - <Fragment> - <div - className={classNames('webchat__bot-markdown-text-activity', 'markdown', textContentStyleSet + '')} - dangerouslySetInnerHTML={{ - __html: renderMarkdownAsHTML(activity.text || '', styleOptions, { externalLinkAlt }) - }} - onClick={handleMarkdownCitationClick} - /> - <LinkDefinitions onCitationClick={handleReferencesCitationClick} claims={claims} /> - </Fragment> - ); -}); - -MarkdownTextActivity.displayName = 'MarkdownTextActivity'; - -export default MarkdownTextActivity; diff --git a/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/LinkDefinitions.css b/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/LinkDefinitions.css deleted file mode 100644 index e5c5d84..0000000 --- a/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/LinkDefinitions.css +++ /dev/null @@ -1,81 +0,0 @@ -.webchat__link-definitions { - margin: 0 10px 10px; -} - -.webchat__link-definitions[open] .webchat__link-definitions__header::after { - transform: rotate(0deg); -} - -.webchat__link-definitions__header { - color: #616161; - font-family: Calibri, 'Helvetica Neue', Arial, 'sans-serif'; - font-size: 80%; - list-style: none; -} - -.webchat__link-definitions__header::after { - background-image: var(--pva__accordion-chevron--down); - content: ''; - display: inline-block; - height: 1em; - margin: 0 2px 2px; - transform: rotate(180deg); - vertical-align: middle; - width: 1em; - zoom: 150%; -} - -.webchat__link-definitions__body { - display: flex; - flex-direction: column; - gap: 4px; - margin: 4px 0 0; - padding: 0; -} - -.webchat__link-definitions__badge { - align-items: center; - aspect-ratio: 1/1; - border-radius: 4px; - border: 1px solid #e0e0e0; - display: flex; - flex-shrink: 0; - font-size: 75%; - height: 1em; - justify-content: center; - margin: 4px; - overflow: hidden; - padding: 2px; - white-space: nowrap; -} - -.webchat__link-definitions__item { - align-items: center; - border-radius: 4px; - border: 1px solid #d1d1d1; - display: flex; - font-family: Calibri, 'Helvetica Neue', Arial, 'sans-serif'; - gap: 4px; - list-style-type: none; - overflow: hidden; - padding: 4px; -} - -.webchat__link-definitions__item-body--citation { - appearance: none; - background: transparent; - border: 0; - color: var(--pva__accent-color); - cursor: pointer; - font-family: inherit; - font-size: inherit; - overflow: hidden; - padding: 0; - text-decoration: underline; - text-overflow: ellipsis; - white-space: nowrap; -} - -.webchat__link-definitions__item-body--url { - color: var(--pva__accent-color); -} diff --git a/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/LinkDefinitions.tsx b/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/LinkDefinitions.tsx deleted file mode 100644 index fc8932f..0000000 --- a/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/LinkDefinitions.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import './LinkDefinitions.css'; - -import { memo } from 'react'; - -import CitationItem from './private/CitationItem'; -import Badge from './private/Badge'; -import URLItem from './private/URLItem'; - -import { type Claim, hasText } from '../../../../types/SchemaOrg/Claim'; - -type Props = { - claims: ReadonlyArray<Claim>; - onCitationClick: (citation: Claim & { text: string }) => void; -}; - -const LinkDefinitions = memo(({ claims, onCitationClick }: Props) => { - return ( - claims.length > 0 && ( - <details open className="webchat__link-definitions"> - <summary className="webchat__link-definitions__header">{claims.length} references</summary> - <ul className="webchat__link-definitions__body"> - {claims.map(claim => ( - <li className="webchat__link-definitions__item"> - {claim.alternateName && <Badge value={claim.alternateName} />} - {hasText(claim) ? <CitationItem claim={claim} onClick={onCitationClick} /> : <URLItem claim={claim} />} - </li> - ))} - </ul> - </details> - ) - ); -}); - -LinkDefinitions.displayName = 'LinkDefinitions'; - -export default LinkDefinitions; diff --git a/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/private/Badge.tsx b/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/private/Badge.tsx deleted file mode 100644 index 526282f..0000000 --- a/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/private/Badge.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { memo } from 'react'; - -type Props = { - value: string; -}; - -export default memo(function Badge({ value }: Props) { - return <div className="webchat__link-definitions__badge">{value}</div>; -}); diff --git a/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/private/CitationItem.tsx b/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/private/CitationItem.tsx deleted file mode 100644 index fe288f4..0000000 --- a/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/private/CitationItem.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { memo, type MouseEventHandler, useCallback } from 'react'; - -import { type Claim } from '../../../../../types/SchemaOrg/Claim'; -import stripMarkdown from '../../stripMarkdown'; - -// Citation is claim with text. -type CitationClaim = Claim & { text: string }; - -type Props = { - claim: CitationClaim; - onClick: (citation: CitationClaim) => void; -}; - -const CitationLinkDefinition = memo(({ onClick, claim }: Props) => { - const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => { - onClick(claim); - }, [claim]); - - return ( - <button className="webchat__link-definitions__item-body--citation" onClick={handleClick} type="button"> - {claim.name ?? - stripMarkdown(claim.text) - .replace(/\r\n/gu, ' ') - .replace(/\s{2,}/gu, ' ')} - </button> - ); -}); - -CitationLinkDefinition.displayName = 'CitationLinkDefinition'; - -export default CitationLinkDefinition; diff --git a/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/private/URLItem.tsx b/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/private/URLItem.tsx deleted file mode 100644 index 2d76e33..0000000 --- a/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/private/URLItem.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { memo } from 'react'; - -import { type Claim } from '../../../../../types/SchemaOrg/Claim'; - -type Props = { - claim: Claim; -}; - -const URLLinkDefinition = memo(({ claim }: Props) => { - return ( - <a className="webchat__link-definitions__item-body--url" href={claim.url} rel="noopener noreferrer" target="_blank"> - {claim.name} - </a> - ); -}); - -URLLinkDefinition.displayName = 'URLLinkDefinition'; - -export default URLLinkDefinition; diff --git a/src/app/ui/MarkdownTextActivity/private/getClaimsFromMarkdown.ts b/src/app/ui/MarkdownTextActivity/private/getClaimsFromMarkdown.ts deleted file mode 100644 index f92aa41..0000000 --- a/src/app/ui/MarkdownTextActivity/private/getClaimsFromMarkdown.ts +++ /dev/null @@ -1,96 +0,0 @@ -// @ts-expect-error ts(1479) think we are CJS, we are actually ESM. -import { fromMarkdown } from 'mdast-util-from-markdown'; - -import onErrorResumeNext from '../../../utils/onErrorResumeNext'; -import stripMarkdown from './stripMarkdown'; - -// import type { Reference } from '../types/Reference'; -import type { Claim as SchemaOrgClaim } from '../../../types/SchemaOrg/Claim'; -import type { Definition, LinkReference, Node, Parent, Root, Text } from 'mdast'; - -function* walk(tree: Parent): Generator<Node> { - for (const child of tree.children) { - yield child; - - const { type } = child; - - if ( - type === 'blockquote' || - type === 'delete' || - type === 'emphasis' || - type === 'footnoteDefinition' || - type === 'heading' || - type === 'link' || - type === 'linkReference' || - type === 'list' || - type === 'listItem' || - type === 'paragraph' || - type === 'strong' || - type === 'table' || - type === 'tableCell' || - type === 'tableRow' - ) { - yield* walk(child); - } - } -} - -function isDefinition(node: Node): node is Definition { - return node.type === 'definition'; -} - -function isLinkReference(node: Node): node is LinkReference { - return node.type === 'linkReference'; -} - -function getDefinition(root: Root, identifier: string): Definition | undefined { - return root.children.find<Definition>( - (topLevelNode: Node): topLevelNode is Definition => - isDefinition(topLevelNode) && topLevelNode.identifier === identifier - ); -} - -export default function* getClaimsFromMarkdown( - text: string, - claimsWithText: Map<string, SchemaOrgClaim & { text: string }> -): Generator<SchemaOrgClaim> { - const tree = fromMarkdown(text); - - for (const node of walk(tree)) { - if (isLinkReference(node)) { - const definition = getDefinition(tree, node.identifier); - - if (!definition) { - continue; - } - - const { identifier: id, title, url } = definition; - const getTextReferenced = () => - node.children.find<Text>((node): node is Text => node.type === 'text')?.value || ''; - - const claim = claimsWithText.get(url); - - if (claim) { - yield { - alternateName: getTextReferenced(), - name: - claim.name || - stripMarkdown(claim.text) - .replace(/\r\n/gu, ' ') - .replace(/\s{2,}/gu, ' '), - ...claim - }; - } else { - yield { - '@context': 'https://schema.org', - '@id': id, - '@type': 'Claim', - alternateName: getTextReferenced(), - name: title || onErrorResumeNext(() => new URL(definition.url).host) || definition.url, - type: 'https://schema.org/Claim', - url: definition.url - }; - } - } - } -} diff --git a/src/app/ui/MarkdownTextActivity/private/getURLProtocol.ts b/src/app/ui/MarkdownTextActivity/private/getURLProtocol.ts deleted file mode 100644 index c8f6bcb..0000000 --- a/src/app/ui/MarkdownTextActivity/private/getURLProtocol.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default function getURLProtocol(urlLike: string): string | undefined { - try { - return new URL(urlLike).protocol; - } catch (error) { - // Return undefined. - } -} diff --git a/src/app/ui/MarkdownTextActivity/private/renderMarkdownAsHTML.ts b/src/app/ui/MarkdownTextActivity/private/renderMarkdownAsHTML.ts deleted file mode 100644 index 95a046f..0000000 --- a/src/app/ui/MarkdownTextActivity/private/renderMarkdownAsHTML.ts +++ /dev/null @@ -1,173 +0,0 @@ -/* eslint no-magic-numbers: ["error", { "ignore": [0, 1, 2] }] */ - -// @ts-expect-error no typings -import iterator from 'markdown-it-for-inline'; -// @ts-expect-error no typings -import MarkdownIt from 'markdown-it'; -// @ts-expect-error no typings -import markdownItAttrs from 'markdown-it-attrs-es5'; -// @ts-expect-error no typings -import sanitizeHTML from 'sanitize-html'; - -const SANITIZE_HTML_OPTIONS = { - allowedAttributes: { - a: ['aria-label', 'class', 'href', 'name', 'rel', 'target', 'title'], - button: ['class', 'data-webchat-citation-href', 'type'], - img: ['alt', 'class', 'src'] - }, - allowedSchemes: ['data', 'http', 'https', 'ftp', 'mailto', 'sip', 'tel'], - allowedTags: [ - 'a', - 'b', - 'blockquote', - 'br', - 'button', - 'caption', - 'code', - 'del', - 'div', - 'em', - 'h1', - 'h2', - 'h3', - 'h4', - 'h5', - 'h6', - 'hr', - 'i', - 'img', - 'ins', - 'li', - 'nl', - 'ol', - 'p', - 'pre', - 's', - 'span', - 'strike', - 'strong', - 'table', - 'tbody', - 'td', - 'tfoot', - 'th', - 'thead', - 'tr', - 'ul' - ] -}; - -// Put a transparent pixel instead of the "open in new window" icon, so developers can easily modify the icon in CSS. -const TRANSPARENT_GIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; - -// This is used for parsing Markdown for external links. -const internalMarkdownIt = new MarkdownIt(); - -const MARKDOWN_ATTRS_LEFT_DELIMITER = '⟬'; -// Make sure the delimiter is free from any RegExp characters, such as *, ?, etc. -// IE11 does not support "u" flag and Babel could not remove it. We intentionally omitting the "u" flag here. -// eslint-disable-next-line require-unicode-regexp -const MARKDOWN_ATTRS_LEFT_DELIMITER_PATTERN = new RegExp(MARKDOWN_ATTRS_LEFT_DELIMITER, 'g'); - -const MARKDOWN_ATTRS_RIGHT_DELIMITER = '⟭'; -// Make sure the delimiter is free from any RegExp characters, such as *, ?, etc. -// IE11 does not support "u" flag and Babel could not remove it. We intentionally omitting the "u" flag here. -// eslint-disable-next-line require-unicode-regexp -const MARKDOWN_ATTRS_RIGHT_DELIMITER_PATTERN = new RegExp(MARKDOWN_ATTRS_RIGHT_DELIMITER, 'g'); - -export default function render( - markdown: string, - { markdownRespectCRLF }: { markdownRespectCRLF: boolean }, - { externalLinkAlt = '' }: { externalLinkAlt?: string } = {} -): string { - if (markdownRespectCRLF) { - markdown = markdown.replace(/\n\r|\r\n/gu, carriageReturn => (carriageReturn === '\n\r' ? '\r\n' : '\n\r')); - } - - // Related to #3165. - // We only support attributes "aria-label" and should leave other attributes as-is. - // However, `markdown-it-attrs` remove unrecognized attributes, such as {hello}. - // Before passing to `markdown-it-attrs`, we will convert known attributes from {aria-label="..."} into ⟬aria-label="..."⟭ (using white tortoise shell brackets). - // Then, we ask `markdown-it-attrs` to only process the new brackets, so it should only try to process things that we allowlisted. - // Lastly, we revert tortoise shell brackets back to curly brackets, for unprocessed attributes. - markdown = markdown - .replace(/\{\s*aria-label()\s*\}/giu, `${MARKDOWN_ATTRS_LEFT_DELIMITER}aria-label${MARKDOWN_ATTRS_RIGHT_DELIMITER}`) - .replace( - /\{\s*aria-label=("[^"]*"|[^\s}]*)\s*\}/giu, - (_, valueInsideQuotes) => - `${MARKDOWN_ATTRS_LEFT_DELIMITER}aria-label=${valueInsideQuotes}${MARKDOWN_ATTRS_RIGHT_DELIMITER}` - ); - - const markdownIt = new MarkdownIt({ - breaks: false, - html: false, - linkify: true, - typographer: true, - xhtmlOut: true - }) - .use(markdownItAttrs, { - // `markdown-it-attrs` is added for accessibility and allow bot developers to specify `aria-label`. - // We are allowlisting `aria-label` only as it is allowlisted in `sanitize-html`. - // Other `aria-*` will be sanitized even we allowlisted here. - allowedAttributes: ['aria-label'], - leftDelimiter: MARKDOWN_ATTRS_LEFT_DELIMITER, - rightDelimiter: MARKDOWN_ATTRS_RIGHT_DELIMITER - }) - // @ts-expect-error no typings - .use(iterator, 'url_new_win', 'link_open', (tokens, index) => { - const token = tokens[+index]; - - token.attrSet('class', 'webchat__bot-text-activity__link webchat__bot-text-activity__link--url'); - token.attrSet('rel', 'noopener noreferrer'); - token.attrSet('target', '_blank'); - - // // @ts-expect-error no typings - // const linkOpenToken = tokens.find(({ type }) => type === 'link_open'); - // @ts-expect-error no typings - // const [, href] = linkOpenToken.attrs.find(([name]) => name === 'href'); - const [, href] = token.attrs.find(([name]) => name === 'href'); - - // Adds a new icon if the link is http: or https:. - // Don't add if it's a phone number, etc. - if (/^https?:/iu.test(href)) { - externalLinkAlt && token.attrSet('title', externalLinkAlt); - - const iconTokens = internalMarkdownIt.parseInline(``)[0].children; - - iconTokens[0].attrJoin('class', 'pva__generative-answer-markdown__external-icon'); - - tokens.splice(index + 2, 0, ...iconTokens); - } - }) // @ts-expect-error no typings - .use(iterator, 'pva_citation', 'link_open', (tokens, index) => { - const token = tokens[+index]; - - // @ts-expect-error no typings - const [, href] = token.attrs.find(([name]) => name === 'href'); - - if (!href?.startsWith('cite:')) { - return; - } - - token.tag = 'button'; - token.attrSet('class', 'webchat__bot-text-activity__link webchat__bot-text-activity__link--citation'); - token.attrSet('data-webchat-citation-href', href); - token.attrSet('type', 'button'); - - const linkCloseToken = tokens.slice(index).find(({ type }: { type: string }) => type === 'link_close'); - - if (linkCloseToken) { - linkCloseToken.tag = 'button'; - } - }); - - let html = markdownIt.render(markdown); - - // Restore attributes not processed by `markdown-it-attrs`. - // TODO: [P2] #2511 After we fixed our polyfill story, we should use "String.prototype.replaceAll" instead of RegExp for replace all occurrences. - html = html.replace(MARKDOWN_ATTRS_LEFT_DELIMITER_PATTERN, '{').replace(MARKDOWN_ATTRS_RIGHT_DELIMITER_PATTERN, '}'); - - // The signature from "sanitize-html" module is not correct. - // @ts-expect - return sanitizeHTML(html, SANITIZE_HTML_OPTIONS); -} diff --git a/src/app/ui/MarkdownTextActivity/private/stripMarkdown.ts b/src/app/ui/MarkdownTextActivity/private/stripMarkdown.ts deleted file mode 100644 index 5e3ab77..0000000 --- a/src/app/ui/MarkdownTextActivity/private/stripMarkdown.ts +++ /dev/null @@ -1,20 +0,0 @@ -// @ts-expect-error no @types/markdown-it -import MarkdownIt from 'markdown-it'; - -export default function stripMarkdown(markdown: string): string { - const markdownIt = new MarkdownIt({ - breaks: false, - html: false, - linkify: true, - typographer: true, - xhtmlOut: true - }); - - const html = markdownIt.render(markdown); - - const element = document.createElement('div'); - - element.innerHTML = html; - - return element.textContent || ''; -} diff --git a/src/app/ui/external/bundle/renderMarkdown/markdownItPlugins/ariaLabel.ts b/src/app/ui/external/bundle/renderMarkdown/markdownItPlugins/ariaLabel.ts new file mode 100644 index 0000000..0a24c0c --- /dev/null +++ b/src/app/ui/external/bundle/renderMarkdown/markdownItPlugins/ariaLabel.ts @@ -0,0 +1,54 @@ +// @ts-expect-error @types/markdown-it is too old. +import MarkdownIt from 'markdown-it'; +// @ts-expect-error no @types/markdown-it-attrs-es5. +import markdownItAttrs from 'markdown-it-attrs-es5'; + +const MARKDOWN_ATTRS_LEFT_DELIMITER = '⟬'; +// Make sure the delimiter is free from any RegExp characters, such as *, ?, etc. +// IE11 does not support "u" flag and Babel could not remove it. We intentionally omitting the "u" flag here. +// eslint-disable-next-line require-unicode-regexp +const MARKDOWN_ATTRS_LEFT_DELIMITER_PATTERN = new RegExp(MARKDOWN_ATTRS_LEFT_DELIMITER, 'g'); + +const MARKDOWN_ATTRS_RIGHT_DELIMITER = '⟭'; +// Make sure the delimiter is free from any RegExp characters, such as *, ?, etc. +// IE11 does not support "u" flag and Babel could not remove it. We intentionally omitting the "u" flag here. +// eslint-disable-next-line require-unicode-regexp +const MARKDOWN_ATTRS_RIGHT_DELIMITER_PATTERN = new RegExp(MARKDOWN_ATTRS_RIGHT_DELIMITER, 'g'); + +const ariaLabel = (markdown: typeof MarkdownIt): typeof MarkdownIt => + markdown.use(markdownItAttrs, { + // `markdown-it-attrs` is added for accessibility and allow bot developers to specify `aria-label`. + // We are allowlisting `aria-label` only as it is allowlisted in `sanitize-html`. + // Other `aria-*` will be sanitized even we allowlisted here. + allowedAttributes: ['aria-label'], + leftDelimiter: MARKDOWN_ATTRS_LEFT_DELIMITER, + rightDelimiter: MARKDOWN_ATTRS_RIGHT_DELIMITER + }); + +// TODO: We should fold pre/post back into the plugin. +const pre = (markdown: string): string => + // Related to #3165. + // We only support attributes "aria-label" and should leave other attributes as-is. + // However, `markdown-it-attrs` remove unrecognized attributes, such as {hello}. + // Before passing to `markdown-it-attrs`, we will convert known attributes from {aria-label="..."} into ⟬aria-label="..."⟭ (using white tortoise shell brackets). + // Then, we ask `markdown-it-attrs` to only process the new brackets, so it should only try to process things that we allowlisted. + // Lastly, we revert tortoise shell brackets back to curly brackets, for unprocessed attributes. + markdown + // IE11 does not support "u" flag and Babel could not remove it. We intentionally omitting the "u" flag here. + // eslint-disable-next-line require-unicode-regexp + .replace(/\{\s*aria-label()\s*\}/gi, `${MARKDOWN_ATTRS_LEFT_DELIMITER}aria-label${MARKDOWN_ATTRS_RIGHT_DELIMITER}`) + .replace( + // IE11 does not support "u" flag and Babel could not remove it. We intentionally omitting the "u" flag here. + // eslint-disable-next-line require-unicode-regexp + /\{\s*aria-label=("[^"]*"|[^\s}]*)\s*\}/gi, + (_, valueInsideQuotes) => + `${MARKDOWN_ATTRS_LEFT_DELIMITER}aria-label=${valueInsideQuotes}${MARKDOWN_ATTRS_RIGHT_DELIMITER}` + ); + +const post = (html: string): string => + // Restore attributes not processed by `markdown-it-attrs`. + // TODO: [P2] #2511 After we fixed our polyfill story, we should use "String.prototype.replaceAll" instead of RegExp for replace all occurrences. + html.replace(MARKDOWN_ATTRS_LEFT_DELIMITER_PATTERN, '{').replace(MARKDOWN_ATTRS_RIGHT_DELIMITER_PATTERN, '}'); + +export default ariaLabel; +export { pre, post }; diff --git a/src/app/ui/external/bundle/renderMarkdown/markdownItPlugins/betterLink.ts b/src/app/ui/external/bundle/renderMarkdown/markdownItPlugins/betterLink.ts new file mode 100644 index 0000000..85b568b --- /dev/null +++ b/src/app/ui/external/bundle/renderMarkdown/markdownItPlugins/betterLink.ts @@ -0,0 +1,123 @@ +// @ts-expect-error no @types/markdown-it-for-inline. +import iterator from 'markdown-it-for-inline'; +// @ts-expect-error @types/markdown-it is too old. +import MarkdownIt from 'markdown-it'; + +// Put a transparent pixel instead of the "open in new window" icon, so developers can easily modify the icon in CSS. +const TRANSPARENT_GIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; + +type AttributeSetter = false | string | ((value?: string) => string); + +type Decoration = { + /** Value of "aria-label" attribute of the link. If set to `false`, remove existing attribute. */ + ariaLabel?: AttributeSetter; + + /** Turns this link into a <button> with "value" attribute instead of "href". */ + asButton?: boolean; + + /** Value of "class" attribute of the link. If set to `false`, remove existing attribute. */ + className?: AttributeSetter; + + /** Alternate text of the image icon appended to the link. */ + iconAlt?: string; + + /** Class name of the image icon appended to the link. */ + iconClassName?: string; + + /** Value of "rel" attribute of the link. If set to `false`, remove existing attribute. */ + rel?: AttributeSetter; + + /** Value of "target" attribute of the link. If set to `false`, remove existing attribute. */ + target?: AttributeSetter; + + /** Value of "title" attribute of the link. If set to `false`, remove existing attribute. */ + title?: AttributeSetter; +}; + +// This is used for parsing Markdown for external links. +const internalMarkdownIt = new MarkdownIt(); + +function setTokenAttribute(attrs: Array<[string, string]>, name: string, value?: AttributeSetter) { + const index = attrs.findIndex(entry => entry[0] === name); + + if (value === false) { + ~index && attrs.splice(index, 1); + } else if (typeof value === 'string') { + if (~index) { + attrs[+index][1] = value; + } else { + attrs.push([name, value]); + } + } else if (typeof value === 'function') { + if (~index) { + attrs[+index][1] = value(attrs[+index][1]); + } else { + attrs.push([name, value()]); + } + } +} + +type MarkdownItToken = { + attrs: [string, string][]; + content: string; + tag: string; + type: string; +}; + +const betterLink = ( + markdown: typeof MarkdownIt, + decorate: (href: string | undefined, textContent: string) => Decoration | undefined +): typeof MarkdownIt => + markdown.use(iterator, 'url_new_win', 'link_open', (tokens: MarkdownItToken[], index: number) => { + const linkCloseToken = tokens.slice(index + 1).find(({ type }) => type === 'link_close'); + const indexOfLinkCloseToken = linkCloseToken ? tokens.indexOf(linkCloseToken) : -1; + const token = tokens[+index]; + + const [, href] = token.attrs.find(([name]) => name === 'href') || []; + const nodesInLink = tokens.slice(index + 1, indexOfLinkCloseToken); + + const textContent = nodesInLink + .filter(({ type }) => type === 'text') + .map(({ content }) => content) + .join(' '); + + const decoration = decorate(href, textContent); + + if (!decoration) { + return; + } + + const { ariaLabel, asButton, className, iconAlt, iconClassName, rel, target, title } = decoration; + + setTokenAttribute(token.attrs, 'aria-label', ariaLabel); + setTokenAttribute(token.attrs, 'class', className); + setTokenAttribute(token.attrs, 'title', title); + + if (iconClassName) { + const iconTokens = internalMarkdownIt.parseInline(``)[0].children; + + setTokenAttribute(iconTokens[0].attrs, 'class', iconClassName); + setTokenAttribute(iconTokens[0].attrs, 'title', iconAlt); + + // Add an icon before </a>. + ~indexOfLinkCloseToken && tokens.splice(indexOfLinkCloseToken, 0, ...iconTokens); + } + + if (asButton) { + setTokenAttribute(token.attrs, 'href', false); + + token.tag = 'button'; + + setTokenAttribute(token.attrs, 'type', 'button'); + setTokenAttribute(token.attrs, 'value', href); + + if (~indexOfLinkCloseToken) { + tokens[+indexOfLinkCloseToken].tag = 'button'; + } + } else { + setTokenAttribute(token.attrs, 'rel', rel); + setTokenAttribute(token.attrs, 'target', target); + } + }); + +export default betterLink; diff --git a/src/app/ui/external/bundle/renderMarkdown/markdownItPlugins/respectCRLF.ts b/src/app/ui/external/bundle/renderMarkdown/markdownItPlugins/respectCRLF.ts new file mode 100644 index 0000000..5cccdca --- /dev/null +++ b/src/app/ui/external/bundle/renderMarkdown/markdownItPlugins/respectCRLF.ts @@ -0,0 +1,7 @@ +// TODO: We should find some other ways to do this. +const pre = (markdown: string): string => + // IE11 does not support "u" flag and Babel could not remove it. We intentionally omitting the "u" flag here. + // eslint-disable-next-line require-unicode-regexp + markdown.replace(/\n\r|\r\n/g, carriageReturn => (carriageReturn === '\n\r' ? '\r\n' : '\n\r')); + +export { pre }; diff --git a/src/app/ui/external/bundle/renderMarkdown/private/iterateLinkDefinitions.ts b/src/app/ui/external/bundle/renderMarkdown/private/iterateLinkDefinitions.ts new file mode 100644 index 0000000..a061a2c --- /dev/null +++ b/src/app/ui/external/bundle/renderMarkdown/private/iterateLinkDefinitions.ts @@ -0,0 +1,14 @@ +import { fromMarkdown } from 'mdast-util-from-markdown'; +import { type Definition, type Node } from 'mdast'; + +function isDefinition(node: Node): node is Definition { + return node.type === 'definition'; +} + +export default function* iterateLinkDefinitions(markdown: string): Generator<Definition, void, void> { + for (const topLevelNode of fromMarkdown(markdown).children) { + if (isDefinition(topLevelNode)) { + yield topLevelNode; + } + } +} diff --git a/src/app/ui/external/bundle/renderMarkdown/renderMarkdownAsHTML.ts b/src/app/ui/external/bundle/renderMarkdown/renderMarkdownAsHTML.ts new file mode 100644 index 0000000..280d40a --- /dev/null +++ b/src/app/ui/external/bundle/renderMarkdown/renderMarkdownAsHTML.ts @@ -0,0 +1,227 @@ +// import { onErrorResumeNext } from 'botframework-webchat-core'; +// @ts-expect-error @types/markdown-it is too old. +import MarkdownIt from 'markdown-it'; +// import sanitizeHTML from 'sanitize-html'; +import { sanitize } from 'dompurify'; + +import { pre as respectCRLFPre } from './markdownItPlugins/respectCRLF'; +import ariaLabel, { post as ariaLabelPost, pre as ariaLabelPre } from './markdownItPlugins/ariaLabel'; +// import betterLink from './markdownItPlugins/betterLink'; +// import iterateLinkDefinitions from './private/iterateLinkDefinitions'; + +// TODO: These rules are okay-ed by security council. +// We need to setup DOMPurify with the same rule as sanitize-html. +// const SANITIZE_HTML_OPTIONS = Object.freeze({ +// allowedAttributes: { +// a: ['aria-label', 'class', 'href', 'name', 'rel', 'target'], +// button: ['aria-label', 'class', 'type', 'value'], +// img: ['alt', 'class', 'src', 'title'], +// span: ['aria-label'] +// }, +// allowedSchemes: ['data', 'http', 'https', 'ftp', 'mailto', 'sip', 'tel'], +// allowedTags: [ +// 'a', +// 'b', +// 'blockquote', +// 'br', +// 'button', +// 'caption', +// 'code', +// 'del', +// 'div', +// 'em', +// 'h1', +// 'h2', +// 'h3', +// 'h4', +// 'h5', +// 'h6', +// 'hr', +// 'i', +// 'img', +// 'ins', +// 'li', +// 'nl', +// 'ol', +// 'p', +// 'pre', +// 's', +// 'span', +// 'strike', +// 'strong', +// 'table', +// 'tbody', +// 'td', +// 'tfoot', +// 'th', +// 'thead', +// 'tr', +// 'ul' +// ], +// // Bug of https://github.com/apostrophecms/sanitize-html/issues/633. +// // They should not remove `alt=""` even though it is empty. +// nonBooleanAttributes: [] +// }); + +const MARKDOWN_IT_INIT = Object.freeze({ + breaks: false, + html: true, + linkify: true, + typographer: true, + xhtmlOut: true +}); + +// TODO: We need to rewrite "betterLink" using DOM. +// type BetterLinkDecoration = Exclude<ReturnType<Parameters<typeof betterLink>[1]>, undefined>; +type RenderInit = { externalLinkAlt?: string }; + +export default function render( + markdown: string, + { markdownRespectCRLF }: Readonly<{ markdownRespectCRLF: boolean }>, + { externalLinkAlt = '' }: Readonly<RenderInit> = Object.freeze({}) +): string { + // TODO: We need to rewrite "betterLink" using DOM. + // const linkDefinitions = Array.from(iterateLinkDefinitions(markdown)); + + if (markdownRespectCRLF) { + markdown = respectCRLFPre(markdown); + } + + markdown = ariaLabelPre(markdown); + + const markdownIt = new MarkdownIt(MARKDOWN_IT_INIT).use(ariaLabel); + + // TODO: We need to rewrite "betterLink" using DOM. + // .use(betterLink, (href: string, textContent: string): BetterLinkDecoration | undefined => { + // const decoration: BetterLinkDecoration = { + // rel: 'noopener noreferrer', + // target: '_blank' + // }; + + // const ariaLabelSegments: string[] = [textContent]; + // const classes: Set<string> = new Set(); + // const linkDefinition = linkDefinitions.find(({ url }) => url === href); + // const protocol = onErrorResumeNext(() => new URL(href).protocol); + + // if (linkDefinition) { + // ariaLabelSegments.push( + // linkDefinition.title || onErrorResumeNext(() => new URL(linkDefinition.url).host) || linkDefinition.url + // ); + + // linkDefinition.identifier === textContent && classes.add('webchat__render-markdown__pure-identifier'); + // } + + // if (protocol === 'cite:') { + // decoration.asButton = true; + + // classes.add('webchat__render-markdown__citation'); + // } else if (protocol === 'http:' || protocol === 'https:') { + // decoration.iconAlt = externalLinkAlt; + // decoration.iconClassName = 'webchat__render-markdown__external-link-icon'; + + // ariaLabelSegments.push(externalLinkAlt); + // } + + // // The first segment is textContent. Putting textContent is aria-label is useless. + // if (ariaLabelSegments.length > 1) { + // // If "aria-label" is already applied, do not overwrite it. + // decoration.ariaLabel = (value?: string | undefined) => value || ariaLabelSegments.join(' '); + // } + + // decoration.className = Array.from(classes).join(' '); + + // // By default, Markdown-It will set "title" to the link title in link definition. + + // // However, "title" may be narrated by screen reader: + // // - Edge + // // - <a> will narrate "aria-label" but not "title" + // // - <button> will narrate both "aria-label" and "title" + // // - NVDA + // // - <a> will narrate both "aria-label" and "title" + // // - <button> will narrate both "aria-label" and "title" + + // // Title makes it very difficult to control narrations by the screen reader. Thus, we are disabling it in favor of "aria-label". + // // This will not affect our accessibility compliance but UX. We could use a non-native tooltip or other forms of visual hint. + + // decoration.title = false; + + // return decoration; + // }); + + let html = markdownIt.render(markdown); + + html = ariaLabelPost(html); + + // return sanitizeHTML(html, SANITIZE_HTML_OPTIONS); + + // TODO: We need to port sanitize-html configuration to dompurify. + const domTree = sanitize(html, { RETURN_DOM: true }); + + for (const anchor of Array.from(domTree.querySelectorAll('a'))) { + // TODO: The code inside this block, need to port the "betterLink" code above and inside the file "markdownItPlugins/betterLink.ts". + // Please be very careful when porting code from "betterLink". It is very difficult to spot if we missed some parts of it. + // I strongly recommend removing the code below and start it from scratch, then porting code line-by-line to make sure we don't miss anything. + const icon = domTree.ownerDocument.createElement('img'); + + icon.className = 'webchat__render-markdown__external-link-icon'; + icon.ariaLabel = anchor.ariaLabel ?? externalLinkAlt; + icon.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; + + anchor.rel = 'noopener noreferrer'; + anchor.target = '_blank'; + + anchor.appendChild(icon); + } + + return domTree.outerHTML; +} + +// Code below are for reference. This is from previous commits. + +// // return the DOM tree if parsing this string returns anything with a non-text HTML node in it, otherwise +// // parse it as Markdown into HTML and return that tree. Sanitizes the output in either case. +// function parseIntoHTML(text: string): HTMLElement { +// // DOMParser is safe; even if it finds potentially dangerous objects, it doesn't run them, just parses them. +// const parsedBody = domParser.parseFromString(text, 'text/html').body; +// // need to use the old-school syntax here for ES version reasons +// for (let i = 0; i < parsedBody.childNodes.length; i++) { +// const node = parsedBody.childNodes[i]; +// if (node.nodeType !== Node.TEXT_NODE) { +// return sanitize(parsedBody, { RETURN_DOM: true }); +// } +// } +// return sanitize(renderMarkdownAsHTML(text, undefined, { externalLinkAlt }), { RETURN_DOM: true }); +// } + +// function annotateLink(link: HTMLAnchorElement) { +// const icon = document.createElement('img'); +// icon.className = 'webchat__render-markdown__external-link-icon externalLinkIcon'; +// icon.ariaLabel = link.ariaLabel ?? externalLinkAlt; +// link.rel = 'noopener noreferrer'; +// link.target = '_blank'; + +// link.appendChild(icon); +// } + +// const contents = parseIntoHTML(text); + +// contents.querySelectorAll('a').forEach(annotateLink); + +// return ( +// <div className="mainWindow webchat__popover"> +// <FocusTrapZone className="webchat__popover__box" firstFocusableTarget={'.closeBox'}> +// <span className="webchat__popover__header"> +// <button +// aria-label={localize('KEYBOARD_HELP_CLOSE_BUTTON_ALT')} +// className="webchat__popover__close-button" +// onClick={handleClose} +// > +// @@ -48,8 +80,8 @@ const CitationWindow = ({ text, title, onClose: handleClose }: Props) => { + +// <span +// className={['contents', citationWindowOverrides].join(' ')} +// ref={ref => { +// contents.childNodes.forEach(node => ref?.appendChild(node)); +// }} +// /> +// </FocusTrapZone> diff --git a/src/app/ui/external/component/Attachment/Text/TextAttachment.tsx b/src/app/ui/external/component/Attachment/Text/TextAttachment.tsx new file mode 100644 index 0000000..5214dec --- /dev/null +++ b/src/app/ui/external/component/Attachment/Text/TextAttachment.tsx @@ -0,0 +1,20 @@ +import { type FC, memo } from 'react'; +import { type WebChatActivity } from 'botframework-webchat-core'; + +import { type WebChatAttachment } from '../private/types/WebChatAttachment'; +import TextContent from './TextContent'; + +type Props = Readonly<{ + activity: WebChatActivity; + attachment: WebChatAttachment & { + contentType: `text/${string}`; + }; +}>; + +const TextAttachment: FC<Props> = memo(({ activity, attachment: { content, contentType } }: Props) => ( + <TextContent contentType={contentType} entities={activity.entities} text={content} /> +)); + +TextAttachment.displayName = 'TextAttachment'; + +export default TextAttachment; diff --git a/src/app/ui/external/component/Attachment/Text/TextContent.tsx b/src/app/ui/external/component/Attachment/Text/TextContent.tsx new file mode 100644 index 0000000..0bb30c3 --- /dev/null +++ b/src/app/ui/external/component/Attachment/Text/TextContent.tsx @@ -0,0 +1,32 @@ +import { hooks } from 'botframework-webchat'; +import { type FC, memo } from 'react'; + +import MarkdownTextContent from './private/MarkdownTextContent'; +import PlainTextContent from './private/PlainTextContent'; + +import { type WebChatActivity } from 'botframework-webchat-core'; + +const { useRenderMarkdownAsHTML } = hooks; + +type Props = Readonly<{ + contentType?: string; + entities?: WebChatActivity['entities']; + text: string; +}>; + +const TextContent: FC<Props> = memo(({ contentType = 'text/plain', entities, text }: Props) => { + const supportMarkdown = !!useRenderMarkdownAsHTML(); + + return text ? ( + contentType === 'text/markdown' && supportMarkdown ? ( + <MarkdownTextContent entities={entities} markdown={text} /> + ) : ( + <PlainTextContent text={text} /> + ) + ) : null; +}); + +TextContent.defaultProps = { contentType: 'text/plain' }; +TextContent.displayName = 'TextContent'; + +export default TextContent; diff --git a/src/app/ui/external/component/Attachment/Text/private/Badge.tsx b/src/app/ui/external/component/Attachment/Text/private/Badge.tsx new file mode 100644 index 0000000..c622853 --- /dev/null +++ b/src/app/ui/external/component/Attachment/Text/private/Badge.tsx @@ -0,0 +1,9 @@ +import { memo } from 'react'; + +type Props = Readonly<{ value: string }>; + +const Badge = memo(({ value }: Props) => <div className="webchat__link-definitions__badge">{value}</div>); + +Badge.displayName = 'Badge'; + +export default Badge; diff --git a/src/app/ui/external/component/Attachment/Text/private/Chevron.tsx b/src/app/ui/external/component/Attachment/Text/private/Chevron.tsx new file mode 100644 index 0000000..eb912c7 --- /dev/null +++ b/src/app/ui/external/component/Attachment/Text/private/Chevron.tsx @@ -0,0 +1,21 @@ +import { memo } from 'react'; + +const Chevron = memo(() => ( + <svg + className="webchat__link-definitions__header-chevron" + fill="none" + height="10" + viewBox="1 3 10 7" + width="14" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M2.14645 4.64645C2.34171 4.45118 2.65829 4.45118 2.85355 4.64645L6 7.79289L9.14645 4.64645C9.34171 4.45118 9.65829 4.45118 9.85355 4.64645C10.0488 4.84171 10.0488 5.15829 9.85355 5.35355L6.35355 8.85355C6.15829 9.04882 5.84171 9.04882 5.64645 8.85355L2.14645 5.35355C1.95118 5.15829 1.95118 4.84171 2.14645 4.64645Z" + fill="currentcolor" + /> + </svg> +)); + +Chevron.displayName = 'Chevron'; + +export default Chevron; diff --git a/src/app/ui/external/component/Attachment/Text/private/CitationItem.tsx b/src/app/ui/external/component/Attachment/Text/private/CitationItem.tsx new file mode 100644 index 0000000..cdb7972 --- /dev/null +++ b/src/app/ui/external/component/Attachment/Text/private/CitationItem.tsx @@ -0,0 +1,35 @@ +import { useRefFrom } from 'use-ref-from'; +import { memo, type MouseEventHandler, useCallback } from 'react'; + +import ItemBody from './ItemBody'; + +type Props = Readonly<{ + identifier: string; + onClick?: (url: string) => void; + title?: string; + url: string; +}>; + +const CitationItem = memo(({ identifier, onClick, title, url }: Props) => { + const onClickRef = useRefFrom(onClick); + const urlHref = useRefFrom(url); + + const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>( + () => onClickRef.current?.(urlHref.current), + [onClickRef, urlHref] + ); + + return ( + <button + className="webchat__link-definitions__list-item-box webchat__link-definitions__list-item-box--as-button" + onClick={handleClick} + type="button" + > + <ItemBody identifier={identifier} title={title || ''} /> + </button> + ); +}); + +CitationItem.displayName = 'CitationItem'; + +export default CitationItem; diff --git a/src/app/ui/external/component/Attachment/Text/private/CitationModalContent.tsx b/src/app/ui/external/component/Attachment/Text/private/CitationModalContent.tsx new file mode 100644 index 0000000..4c770ab --- /dev/null +++ b/src/app/ui/external/component/Attachment/Text/private/CitationModalContent.tsx @@ -0,0 +1,39 @@ +import { Fragment, memo } from 'react'; +import { hooks } from 'botframework-webchat'; +import classNames from 'classnames'; + +const { useRenderMarkdownAsHTML, useStyleSet } = hooks; + +type Props = Readonly<{ + headerText?: string; + markdown: string; +}>; + +const CitationModalContent = memo(({ headerText, markdown }: Props) => { + const [{ renderMarkdown: renderMarkdownStyleSet }] = useStyleSet(); + const renderMarkdownAsHTML = useRenderMarkdownAsHTML(); + + return ( + <Fragment> + {headerText && <h2 className="webchat__citation-modal-dialog__header">{headerText}</h2>} + {renderMarkdownAsHTML ? ( + <div + className={classNames( + 'webchat__citation-modal-dialog__body', + 'webchat__render-markdown', + renderMarkdownStyleSet + '' + )} + // The content rendered by `renderMarkdownAsHTML` is sanitized. + // eslint-disable-next-line react/no-danger + dangerouslySetInnerHTML={{ __html: renderMarkdownAsHTML(markdown) }} + /> + ) : ( + <div className={classNames('webchat__render-markdown', renderMarkdownStyleSet + '')}>{markdown}</div> + )} + </Fragment> + ); +}); + +CitationModalContent.displayName = 'CitationModalContent'; + +export default CitationModalContent; diff --git a/src/app/ui/external/component/Attachment/Text/private/ItemBody.tsx b/src/app/ui/external/component/Attachment/Text/private/ItemBody.tsx new file mode 100644 index 0000000..9d574bc --- /dev/null +++ b/src/app/ui/external/component/Attachment/Text/private/ItemBody.tsx @@ -0,0 +1,22 @@ +import { memo } from 'react'; + +import Badge from './Badge'; +import OpenInNewWindowIcon from './OpenInNewWindowIcon'; + +type Props = Readonly<{ + identifier: string; + isExternal?: boolean; + title: string; +}>; + +const ItemBody = memo(({ identifier, isExternal, title }: Props) => ( + <div className="webchat__link-definitions__list-item-body"> + {identifier ? <Badge value={identifier} /> : null} + <div className="webchat__link-definitions__list-item-text">{title}</div> + {isExternal ? <OpenInNewWindowIcon className="webchat__link-definitions__open-in-new-window-icon" /> : null} + </div> +)); + +ItemBody.displayName = 'ItemBody'; + +export default ItemBody; diff --git a/src/app/ui/external/component/Attachment/Text/private/LinkDefinitions.tsx b/src/app/ui/external/component/Attachment/Text/private/LinkDefinitions.tsx new file mode 100644 index 0000000..160d7a5 --- /dev/null +++ b/src/app/ui/external/component/Attachment/Text/private/LinkDefinitions.tsx @@ -0,0 +1,65 @@ +import { fromMarkdown } from 'mdast-util-from-markdown'; +import { hooks } from 'botframework-webchat'; +import { memo } from 'react'; +import { onErrorResumeNext } from 'botframework-webchat-core'; +import { type Definition } from 'mdast'; +import classNames from 'classnames'; + +import Chevron from './Chevron'; +import CitationItem from './CitationItem'; +import URLItem from './URLItem'; + +const { useLocalizer, useStyleSet } = hooks; + +type Props = Readonly<{ + markdown: string; + onCitationClick?: (url: string) => void; +}>; + +const REFERENCE_LIST_HEADER_IDS = { + one: 'REFERENCE_LIST_HEADER_ONE', + few: 'REFERENCE_LIST_HEADER_FEW', + many: 'REFERENCE_LIST_HEADER_MANY', + other: 'REFERENCE_LIST_HEADER_OTHER', + two: 'REFERENCE_LIST_HEADER_TWO' +}; + +function isCitation(url: string): boolean { + return onErrorResumeNext(() => new URL(url).protocol) === 'cite:'; +} + +const LinkDefinitions = memo(({ markdown, onCitationClick }: Props) => { + const [{ linkDefinitions }] = useStyleSet(); + const definitions = fromMarkdown(markdown).children.filter((node): node is Definition => node.type === 'definition'); + const localizeWithPlural = useLocalizer({ plural: true }); + + const headerText = localizeWithPlural(REFERENCE_LIST_HEADER_IDS, definitions.length); + + return definitions.length > 0 ? ( + <details className={classNames(linkDefinitions, 'webchat__link-definitions')} open={true}> + <summary className="webchat__link-definitions__header"> + {headerText} <Chevron /> + </summary> + <div className="webchat__link-definitions__list" role="list"> + {definitions.map(definition => ( + <div className="webchat__link-definitions__list-item" key={definition.identifier} role="listitem"> + {isCitation(definition.url) ? ( + <CitationItem + identifier={definition.identifier} + onClick={onCitationClick} + title={definition.title || undefined} + url={definition.url} + /> + ) : ( + <URLItem identifier={definition.identifier} title={definition.title || undefined} url={definition.url} /> + )} + </div> + ))} + </div> + </details> + ) : null; +}); + +LinkDefinitions.displayName = 'LinkDefinitions'; + +export default LinkDefinitions; diff --git a/src/app/ui/external/component/Attachment/Text/private/MarkdownTextContent.tsx b/src/app/ui/external/component/Attachment/Text/private/MarkdownTextContent.tsx new file mode 100644 index 0000000..425ad0e --- /dev/null +++ b/src/app/ui/external/component/Attachment/Text/private/MarkdownTextContent.tsx @@ -0,0 +1,117 @@ +import { hooks } from 'botframework-webchat'; +import { useRefFrom } from 'use-ref-from'; +import classNames from 'classnames'; +import { memo, type MouseEventHandler, useCallback, useMemo } from 'react'; + +import { isClaim, type Claim } from '../../../types/external/OrgSchema/Claim'; +import { isThing } from '../../../types/external/OrgSchema/Thing'; +import { type PropsOf } from '../../../types/PropsOf'; +import { type WebChatActivity } from 'botframework-webchat-core'; +import CitationModalContext from './CitationModalContent'; +import isHTMLButtonElement from './isHTMLButtonElement'; +import LinkDefinitions from './LinkDefinitions'; +import useShowModal from '../../../providers/ModalDialog/useShowModal'; + +const { useLocalizer, useRenderMarkdownAsHTML, useStyleSet } = hooks; + +type Props = Readonly<{ + entities?: WebChatActivity['entities']; + markdown: string; +}>; + +const MarkdownTextContent = memo(({ entities, markdown }: Props) => { + const [ + { + citationModalDialog: citationModalDialogStyleSet, + renderMarkdown: renderMarkdownStyleSet, + textContent: textContentStyleSet + } + ] = useStyleSet(); + const entitiesRef = useRefFrom(entities); + const renderMarkdownAsHTML = useRenderMarkdownAsHTML(); + const showModal = useShowModal(); + + const localize = useLocalizer(); + + const citationModalDialogLabel = localize('CITATION_MODEL_DIALOG_ALT'); + + if (!renderMarkdownAsHTML) { + throw new Error('botframework-webchat: assert failed for renderMarkdownAsHTML'); + } + + const dangerouslySetInnerHTML = useMemo( + () => ({ __html: markdown ? renderMarkdownAsHTML(markdown) : '' }), + [renderMarkdownAsHTML, markdown] + ); + + const showClaimModal = useCallback( + (claim: Claim) => { + showModal(() => <CitationModalContext headerText={claim.name} markdown={claim.text || ''} />, { + 'aria-label': claim.alternateName || claim.name || citationModalDialogLabel, + className: classNames('webchat__citation-modal-dialog', citationModalDialogStyleSet) + }); + }, + [citationModalDialogStyleSet, citationModalDialogLabel, showModal] + ); + + const handleCitationClick = useCallback<Exclude<PropsOf<typeof LinkDefinitions>['onCitationClick'], undefined>>( + url => { + const claim = entities?.find<Claim>( + (entity): entity is Claim => isThing(entity) && isClaim(entity) && entity['@id'] === url + ); + + claim && showClaimModal(claim); + }, + [entities, showClaimModal] + ); + + const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>( + event => { + // Find out what <button> is being clicked. + const targetElement = event.target as HTMLElement; + const buttonElement: HTMLButtonElement | undefined = isHTMLButtonElement(targetElement) + ? targetElement + : (targetElement.closest('button') as HTMLButtonElement | undefined); + + if (!buttonElement || !targetElement.contains(buttonElement)) { + return; + } + + const claim = entitiesRef.current?.find<Claim>( + (entity): entity is Claim => isThing(entity) && isClaim(entity) && entity['@id'] === buttonElement.value + ); + + if (!claim) { + return; + } + + event.preventDefault(); + event.stopPropagation(); + + showClaimModal(claim); + }, + [entitiesRef, showClaimModal] + ); + + return ( + <div + className={classNames('webchat__text-content', 'webchat__text-content--is-markdown', textContentStyleSet + '')} + > + <div + className={classNames( + 'webchat__text-content__markdown', + 'webchat__render-markdown', + renderMarkdownStyleSet + '' + )} + // eslint-disable-next-line react/no-danger + dangerouslySetInnerHTML={dangerouslySetInnerHTML} + onClick={handleClick} + /> + <LinkDefinitions markdown={markdown} onCitationClick={handleCitationClick} /> + </div> + ); +}); + +MarkdownTextContent.displayName = 'MarkdownTextContent'; + +export default MarkdownTextContent; diff --git a/src/app/ui/external/component/Attachment/Text/private/OpenInNewWindowIcon.tsx b/src/app/ui/external/component/Attachment/Text/private/OpenInNewWindowIcon.tsx new file mode 100644 index 0000000..2d746f3 --- /dev/null +++ b/src/app/ui/external/component/Attachment/Text/private/OpenInNewWindowIcon.tsx @@ -0,0 +1,18 @@ +import classNames from 'classnames'; + +type Props = Readonly<{ className?: string }>; + +const OpenInNewWindowIcon = ({ className }: Props) => ( + <svg + className={classNames('webchat__text-content__open-in-new-window-icon', className)} + viewBox="3 3 18 18" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M7.2501 4.50017H10.7495C11.1637 4.50017 11.4995 4.83596 11.4995 5.25017C11.4995 5.62986 11.2173 5.94366 10.8513 5.99332L10.7495 6.00017H7.24974C6.07079 5.99961 5.10349 6.90656 5.00786 8.06112L5.00028 8.22003L5.00312 16.7507C5.00343 17.9415 5.92885 18.9161 7.09966 18.9949L7.25371 19.0001L15.7518 18.9884C16.9415 18.9868 17.9145 18.062 17.9935 16.8923L17.9987 16.7384V13.2321C17.9987 12.8179 18.3345 12.4821 18.7487 12.4821C19.1284 12.4821 19.4422 12.7643 19.4918 13.1303L19.4987 13.2321V16.7384C19.4987 18.7407 17.9293 20.3769 15.9528 20.4829L15.7538 20.4884L7.25827 20.5001L7.05495 20.4949C5.14239 20.3954 3.60895 18.8627 3.50837 16.9502L3.50312 16.7511L3.50089 8.2527L3.50529 8.0502C3.60539 6.13749 5.13867 4.60449 7.05096 4.50527L7.2501 4.50017H10.7495H7.2501ZM13.7481 3.00146L20.3018 3.00197L20.4014 3.01575L20.5022 3.04393L20.559 3.06803C20.6122 3.09122 20.6634 3.12163 20.7111 3.15885L20.7804 3.22156L20.8641 3.32014L20.9183 3.41025L20.957 3.50057L20.9762 3.56476L20.9898 3.62862L20.9992 3.72282L20.9997 10.2554C20.9997 10.6696 20.6639 11.0054 20.2497 11.0054C19.87 11.0054 19.5562 10.7232 19.5065 10.3571L19.4997 10.2554L19.4989 5.56147L12.2797 12.7847C12.0134 13.051 11.5968 13.0753 11.3031 12.8575L11.219 12.7849C10.9527 12.5187 10.9284 12.1021 11.1462 11.8084L11.2188 11.7243L18.4369 4.50146H13.7481C13.3684 4.50146 13.0546 4.21931 13.005 3.85324L12.9981 3.75146C12.9981 3.37177 13.2803 3.05797 13.6464 3.00831L13.7481 3.00146Z" + fill="currentcolor" + /> + </svg> +); + +export default OpenInNewWindowIcon; diff --git a/src/app/ui/external/component/Attachment/Text/private/PlainTextContent.tsx b/src/app/ui/external/component/Attachment/Text/private/PlainTextContent.tsx new file mode 100644 index 0000000..58cba4b --- /dev/null +++ b/src/app/ui/external/component/Attachment/Text/private/PlainTextContent.tsx @@ -0,0 +1,28 @@ +import { hooks } from 'botframework-webchat'; +import { type FC, Fragment, memo } from 'react'; +import classNames from 'classnames'; + +const { useStyleSet } = hooks; + +type Props = Readonly<{ text: string }>; + +const PlainTextContent: FC<Props> = memo(({ text }: Props) => { + const [{ textContent: textContentStyleSet }] = useStyleSet(); + + return ( + <Fragment> + {(text || '').split('\n').map(line => ( + <p + className={classNames('webchat__text-content', 'webchat__text-content--is-plain', textContentStyleSet + '')} + key={line} + > + {line.trim()} + </p> + ))} + </Fragment> + ); +}); + +PlainTextContent.displayName = 'PlainTextContent'; + +export default PlainTextContent; diff --git a/src/app/ui/external/component/Attachment/Text/private/URLItem.tsx b/src/app/ui/external/component/Attachment/Text/private/URLItem.tsx new file mode 100644 index 0000000..f74792f --- /dev/null +++ b/src/app/ui/external/component/Attachment/Text/private/URLItem.tsx @@ -0,0 +1,25 @@ +import { memo } from 'react'; + +import extractHostnameWithSubdomain from './extractHostnameWithSubdomain'; +import ItemBody from './ItemBody'; + +type Props = Readonly<{ + identifier: string; + title?: string; + url: string; +}>; + +const URLItem = memo(({ identifier, title, url }: Props) => ( + <a + className="webchat__link-definitions__list-item-box webchat__link-definitions__list-item-box--as-link" + href={url} + rel="noopener noreferrer" + target="_blank" + > + <ItemBody identifier={identifier} isExternal={true} title={title || extractHostnameWithSubdomain(url)} /> + </a> +)); + +URLItem.displayName = 'URLItem'; + +export default URLItem; diff --git a/src/app/ui/external/component/Attachment/Text/private/extractHostnameWithSubdomain.ts b/src/app/ui/external/component/Attachment/Text/private/extractHostnameWithSubdomain.ts new file mode 100644 index 0000000..4c974d3 --- /dev/null +++ b/src/app/ui/external/component/Attachment/Text/private/extractHostnameWithSubdomain.ts @@ -0,0 +1,17 @@ +export default function extractHostnameWithSubdomain(urlString: string): string { + try { + const { host, port, protocol } = new URL(urlString); + + if (protocol === 'http:' || protocol === 'https:') { + if (!port) { + return host.replace(/^www\./iu, ''); + } + + return host; + } + } catch (error) { + // Intentionally left blank, will return `urlString`. + } + + return urlString; +} diff --git a/src/app/ui/MarkdownTextActivity/private/LinkDefinitions/private/isHTMLButtonElement.ts b/src/app/ui/external/component/Attachment/Text/private/isHTMLButtonElement.ts similarity index 100% rename from src/app/ui/MarkdownTextActivity/private/LinkDefinitions/private/isHTMLButtonElement.ts rename to src/app/ui/external/component/Attachment/Text/private/isHTMLButtonElement.ts diff --git a/src/app/ui/external/component/Attachment/private/types/WebChatAttachment.ts b/src/app/ui/external/component/Attachment/private/types/WebChatAttachment.ts new file mode 100644 index 0000000..fb49ffa --- /dev/null +++ b/src/app/ui/external/component/Attachment/private/types/WebChatAttachment.ts @@ -0,0 +1,10 @@ +import { WebChatActivity } from 'botframework-webchat-core'; + +import { type TypeOfArray } from '../../../types/internal/TypeOfArray'; + +export type WebChatAttachment = TypeOfArray< + Exclude<(WebChatActivity & { type: 'message' })['attachments'], undefined> +> & { + content?: string; + contentType: string; +}; diff --git a/src/app/ui/external/component/providers/ModalDialog/ModalDialogComposer.tsx b/src/app/ui/external/component/providers/ModalDialog/ModalDialogComposer.tsx new file mode 100644 index 0000000..36aef2e --- /dev/null +++ b/src/app/ui/external/component/providers/ModalDialog/ModalDialogComposer.tsx @@ -0,0 +1,48 @@ +import { memo, type ReactNode, useCallback, useMemo, useState } from 'react'; + +import Context from './private/Context'; +import ModalDialog from './private/Popover'; + +import { type ContextOf } from '../../types/ContextOf'; + +type ContextType = ContextOf<typeof Context>; +type RenderFunction = Parameters<ContextType['showModal']>[0]; +type DialogInit = Exclude<Parameters<ContextType['showModal']>[1], undefined>; + +type RenderFunctionAndDialogInit = Readonly<[RenderFunction, DialogInit | undefined]>; + +type Props = Readonly<{ children?: ReactNode }>; + +const ModalDialogComposer = memo(({ children }: Props) => { + const [renderFunctionAndDialogInit, setRenderFunctionAndDialogInit] = useState< + RenderFunctionAndDialogInit | undefined + >(); + + const close = useCallback(() => setRenderFunctionAndDialogInit(undefined), [setRenderFunctionAndDialogInit]); + const showModal = useCallback<(render: RenderFunction, init?: DialogInit) => void>( + (render: RenderFunction, init?: DialogInit) => setRenderFunctionAndDialogInit(Object.freeze([render, init])), + [setRenderFunctionAndDialogInit] + ); + + const context = useMemo<ContextType>(() => Object.freeze({ close, showModal }), [close, showModal]); + + return ( + <Context.Provider value={context}> + {children} + {renderFunctionAndDialogInit && ( + <ModalDialog + aria-label={renderFunctionAndDialogInit[1]?.['aria-label']} + aria-labelledby={renderFunctionAndDialogInit[1]?.['aria-labelledby']} + className={renderFunctionAndDialogInit[1]?.className} + onDismiss={close} + > + {renderFunctionAndDialogInit[0]()} + </ModalDialog> + )} + </Context.Provider> + ); +}); + +ModalDialogComposer.displayName = 'ModalDialogComposer'; + +export default ModalDialogComposer; diff --git a/src/app/ui/external/component/providers/ModalDialog/private/Context.ts b/src/app/ui/external/component/providers/ModalDialog/private/Context.ts new file mode 100644 index 0000000..b71635d --- /dev/null +++ b/src/app/ui/external/component/providers/ModalDialog/private/Context.ts @@ -0,0 +1,37 @@ +import { type ReactNode, createContext } from 'react'; + +type DialogInit = { + 'aria-label'?: string; + 'aria-labelledby'?: string; + className?: string; +}; + +type RenderFunction = () => ReactNode; + +type ContextType = Readonly<{ + close(): void; + showModal(render: RenderFunction, init?: DialogInit): void; +}>; + +type ContextAsGetter<T extends Record<string, unknown>> = T extends Record<infer K, infer V> + ? Record<K, { get(): V }> + : never; + +const defaultContextValue: ContextAsGetter<ContextType> = { + close: { + get() { + throw new Error('close cannot be used outside of <ModalDialogComposer>.'); + } + }, + showModal: { + get() { + throw new Error('showModal cannot be used outside of <ModalDialogComposer>.'); + } + } +}; + +const Context = createContext<ContextType>(Object.create({}, defaultContextValue)); + +Context.displayName = 'ModalDialogComposer'; + +export default Context; diff --git a/src/app/ui/external/component/providers/ModalDialog/private/Popover.tsx b/src/app/ui/external/component/providers/ModalDialog/private/Popover.tsx new file mode 100644 index 0000000..8ba20dd --- /dev/null +++ b/src/app/ui/external/component/providers/ModalDialog/private/Popover.tsx @@ -0,0 +1,73 @@ +import { hooks } from 'botframework-webchat'; +import { memo, type PropsWithChildren, useCallback, useEffect, useRef } from 'react'; +import classNames from 'classnames'; + +const { useLocalizer, useStyleSet } = hooks; + +type Props = Readonly< + PropsWithChildren<{ + 'aria-label'?: string; + 'aria-labelledby'?: string; + className?: string; + onDismiss?: () => void; + }> +>; + +const ModalDialog = memo( + ({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, className, onDismiss }: Props) => { + const [{ modalDialog: modalDialogStyleSet }] = useStyleSet(); + const dialogRef = useRef<HTMLDialogElement>(null); + const localize = useLocalizer(); + + const closeButtonAlt = localize('KEYBOARD_HELP_CLOSE_BUTTON_ALT'); + + const handleCloseButtonClick = useCallback(() => dialogRef.current?.close(), [dialogRef]); + + useEffect(() => dialogRef.current?.showModal(), [dialogRef]); + + return ( + <dialog + // When "aria-labelledby" is set, it must not set "aria-label". + aria-label={!ariaLabelledBy ? ariaLabel : undefined} + aria-labelledby={ariaLabelledBy} + className={classNames('webchat__modal-dialog', className, modalDialogStyleSet + '')} + onClose={onDismiss} + open={false} + ref={dialogRef} + role="dialog" + > + <div className="webchat__modal-dialog__box"> + {/* The __scrollable layer is for hiding scrollbar at corners. + Without this layer, the scrollbar will show and overflow the border-radius. + This impact will be more visible if we temporarily set border-radius: 20px. */} + <div className="webchat__modal-dialog__close-button-layout"> + <button + aria-label={closeButtonAlt} + className="webchat__modal-dialog__close-button" + onClick={handleCloseButtonClick} + type="button" + > + <div className="webchat__modal-dialog__close-button-border"> + <svg + className="webchat__modal-dialog__close-button-image" + // "focusable" attribute is only available in IE11 and "tabIndex={-1}" does not work. + focusable={false} + role="presentation" + viewBox="0 0 2048 2048" + xmlns="http://www.w3.org/2000/svg" + > + <path d="M2048 136l-888 888 888 888-136 136-888-888-888 888L0 1912l888-888L0 136 136 0l888 888L1912 0l136 136z" /> + </svg> + </div> + </button> + </div> + <div className="webchat__modal-dialog__body">{children}</div> + </div> + </dialog> + ); + } +); + +ModalDialog.displayName = 'ModalDialog'; + +export default ModalDialog; diff --git a/src/app/ui/external/component/providers/ModalDialog/private/useContext.ts b/src/app/ui/external/component/providers/ModalDialog/private/useContext.ts new file mode 100644 index 0000000..bfe7b11 --- /dev/null +++ b/src/app/ui/external/component/providers/ModalDialog/private/useContext.ts @@ -0,0 +1,9 @@ +import { useContext as useReactContext } from 'react'; + +import Context from './Context'; + +import { type ContextOf } from '../../../types/ContextOf'; + +export default function useContext(): ContextOf<typeof Context> { + return useReactContext(Context); +} diff --git a/src/app/ui/external/component/providers/ModalDialog/useClose.ts b/src/app/ui/external/component/providers/ModalDialog/useClose.ts new file mode 100644 index 0000000..07065d5 --- /dev/null +++ b/src/app/ui/external/component/providers/ModalDialog/useClose.ts @@ -0,0 +1,5 @@ +import useContext from './private/useContext'; + +export default function useClose(): ReturnType<typeof useContext>['close'] { + return useContext().close; +} diff --git a/src/app/ui/external/component/providers/ModalDialog/useShowModal.ts b/src/app/ui/external/component/providers/ModalDialog/useShowModal.ts new file mode 100644 index 0000000..bb39233 --- /dev/null +++ b/src/app/ui/external/component/providers/ModalDialog/useShowModal.ts @@ -0,0 +1,5 @@ +import useContext from './private/useContext'; + +export default function useShowModal(): ReturnType<typeof useContext>['showModal'] { + return useContext().showModal; +} diff --git a/src/app/ui/external/component/types/ContextOf.ts b/src/app/ui/external/component/types/ContextOf.ts new file mode 100644 index 0000000..dd46424 --- /dev/null +++ b/src/app/ui/external/component/types/ContextOf.ts @@ -0,0 +1,6 @@ +import { type Context } from 'react'; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type ContextOf<T extends Context<any>> = T extends Context<infer C> ? C : never; + +export type { ContextOf }; diff --git a/src/app/ui/external/component/types/PropsOf.ts b/src/app/ui/external/component/types/PropsOf.ts new file mode 100644 index 0000000..8b1a617 --- /dev/null +++ b/src/app/ui/external/component/types/PropsOf.ts @@ -0,0 +1,10 @@ +import { type ComponentType, type MemoExoticComponent } from 'react'; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export type PropsOf<T extends ComponentType<any> | MemoExoticComponent<ComponentType<any>>> = T extends ComponentType< + infer P +> + ? P + : T extends MemoExoticComponent<ComponentType<infer P>> + ? P + : never; diff --git a/src/app/ui/external/component/types/external/OrgSchema/Claim.ts b/src/app/ui/external/component/types/external/OrgSchema/Claim.ts new file mode 100644 index 0000000..7a02536 --- /dev/null +++ b/src/app/ui/external/component/types/external/OrgSchema/Claim.ts @@ -0,0 +1,25 @@ +import { isThingOf, type Thing } from './Thing'; + +/** + * A [Claim](https://schema.org/Claim) in Schema.org represents a specific, factually-oriented claim that could be the [itemReviewed](https://schema.org/itemReviewed) in a [ClaimReview](https://schema.org/ClaimReview). The content of a claim can be summarized with the [text](https://schema.org/text) property. Variations on well known claims can have their common identity indicated via [sameAs](https://schema.org/sameAs) links, and summarized with a name. Ideally, a [Claim](https://schema.org/Claim) description includes enough contextual information to minimize the risk of ambiguity or inclarity. In practice, many claims are better understood in the context in which they appear or the interpretations provided by claim reviews. + * + * Beyond [ClaimReview](https://schema.org/ClaimReview), the Claim type can be associated with related creative works - for example a [ScholarlyArticle](https://schema.org/ScholarlyArticle) or [Question](https://schema.org/Question) might be about some [Claim](https://schema.org/Claim). + * + * This is partial implementation of https://schema.org/Claim. + * + * @see https://schema.org/Claim. + */ +export type Claim = Thing<'Claim'> & { + /** The textual content of this CreativeWork. */ + text?: string; + + /** The name of the item. */ + name?: string; + + /** URL of the item. */ + url?: string; +}; + +export function isClaim(thing: Thing): thing is Claim { + return isThingOf(thing, 'Claim'); +} diff --git a/src/app/ui/external/component/types/external/OrgSchema/Project.ts b/src/app/ui/external/component/types/external/OrgSchema/Project.ts new file mode 100644 index 0000000..40fc992 --- /dev/null +++ b/src/app/ui/external/component/types/external/OrgSchema/Project.ts @@ -0,0 +1,20 @@ +import { isThingOf, type Thing } from './Thing'; + +/** + * An enterprise (potentially individual but typically collaborative), planned to achieve a particular aim. Use properties from [Organization](https://schema.org/Organization), [subOrganization](https://schema.org/subOrganization)/[parentOrganization](https://schema.org/parentOrganization) to indicate project sub-structures. + * + * This is partial implementation of https://schema.org/Project. + * + * @see https://schema.org/Project + */ +export type Project = Thing<'Project'> & { + /** The name of the item. */ + name: string; + + /** URL of the item. */ + url: string; +}; + +export function isProject(thing: Thing): thing is Project { + return isThingOf(thing, 'Project'); +} diff --git a/src/app/ui/external/component/types/external/OrgSchema/ReplyAction.ts b/src/app/ui/external/component/types/external/OrgSchema/ReplyAction.ts new file mode 100644 index 0000000..6fea61d --- /dev/null +++ b/src/app/ui/external/component/types/external/OrgSchema/ReplyAction.ts @@ -0,0 +1,21 @@ +import { isThingOf, type Thing } from './Thing'; +import { type Project } from './Project'; + +/** + * The act of responding to a question/message asked/sent by the object. Related to [AskAction](https://schema.org/AskAction). + * + * This is partial implementation of https://schema.org/ReplyAction. + * + * @see https://schema.org/ReplyAction + */ +export type ReplyAction = Thing<'ReplyAction'> & { + /** A description of the item. */ + description?: string; + + /** The service provider, service operator, or service performer; the goods producer. Another party (a seller) may offer those services or goods on behalf of the provider. A provider may also serve as the seller. Supersedes [carrier](https://schema.org/carrier). */ + provider?: Project; +}; + +export function isReplyAction(thing: Thing): thing is ReplyAction { + return isThingOf(thing, 'ReplyAction'); +} diff --git a/src/app/ui/external/component/types/external/OrgSchema/Thing.ts b/src/app/ui/external/component/types/external/OrgSchema/Thing.ts new file mode 100644 index 0000000..7aae6df --- /dev/null +++ b/src/app/ui/external/component/types/external/OrgSchema/Thing.ts @@ -0,0 +1,51 @@ +import { type OrgSchemaThing } from 'botframework-webchat-core'; + +/** + * The most generic type of item. + * + * This is partial implementation of https://schema.org/Thing. + * + * @see https://schema.org/Thing + */ +export type Thing<T extends string = string> = OrgSchemaThing<T> & { + '@id'?: string; + + /** An alias for the item. */ + alternateName?: string; + + /** The name of the item. */ + name?: string; +}; + +export function isThing(thing: { '@context'?: string; '@type'?: string; type?: string }): thing is Thing<string> { + if (typeof thing === 'object' && thing) { + return ( + '@context' in thing && + '@type' in thing && + 'type' in thing && + thing['@context'] === 'https://schema.org' && + typeof thing['@type'] === 'string' && + thing.type === `https://schema.org/${thing['@type']}` + ); + } + + return false; +} + +export function isThingOf<T extends string>( + thing: { '@context'?: string; '@type'?: string; type?: string }, + type: T +): thing is Thing<T> { + if (typeof thing === 'object' && thing) { + return ( + '@context' in thing && + '@type' in thing && + 'type' in thing && + thing['@context'] === 'https://schema.org' && + thing['@type'] === type && + thing.type === `https://schema.org/${type}` + ); + } + + return false; +} diff --git a/src/app/ui/external/component/types/external/OrgSchema/VoteAction.ts b/src/app/ui/external/component/types/external/OrgSchema/VoteAction.ts new file mode 100644 index 0000000..3bcbe70 --- /dev/null +++ b/src/app/ui/external/component/types/external/OrgSchema/VoteAction.ts @@ -0,0 +1,17 @@ +import { isThingOf, type Thing } from './Thing'; + +/** + * The act of expressing a preference from a fixed/finite/structured set of choices/options. + * + * This is partial implementation of https://schema.org/VoteAction. + * + * @see https://schema.org/VoteAction + */ +export type VoteAction = Thing<'VoteAction'> & { + /** A sub property of object. The options subject to this action. Supersedes [option](https://schema.org/option). */ + actionOption?: string; +}; + +export function isVoteAction(thing: Thing): thing is VoteAction { + return isThingOf(thing, 'VoteAction'); +} diff --git a/src/app/ui/external/component/types/internal/TypeOfArray.ts b/src/app/ui/external/component/types/internal/TypeOfArray.ts new file mode 100644 index 0000000..3c02b91 --- /dev/null +++ b/src/app/ui/external/component/types/internal/TypeOfArray.ts @@ -0,0 +1,5 @@ +export type TypeOfArray<T extends unknown[] | Array<unknown> | ReadonlyArray<unknown>> = T extends (infer I)[] + ? I + : T extends readonly (infer I)[] + ? I + : T; diff --git a/src/tsconfig.default.json b/src/tsconfig.default.json index caa310f..00d00d1 100644 --- a/src/tsconfig.default.json +++ b/src/tsconfig.default.json @@ -4,7 +4,7 @@ "esModuleInterop": true, "jsx": "react-jsx", "lib": ["DOM", "ESNext", "WebWorker"], - "moduleResolution": "NodeNext", + "moduleResolution": "Bundler", "noEmit": true, "preserveWatchOutput": true, "skipLibCheck": true,