{actions.map((action, index) => (
))}
diff --git a/packages/component/src/Styles/StyleSet/FeedbackForm.ts b/packages/component/src/Styles/StyleSet/FeedbackForm.ts
deleted file mode 100644
index dc0180f84e..0000000000
--- a/packages/component/src/Styles/StyleSet/FeedbackForm.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import CSSTokens from '../CSSTokens';
-
-export default function createFeedbackFormStyle() {
- return {
- '&.webchat__feedback-form': {
- display: 'contents',
-
- '& .webchat__feedback-form__vote-button-bar': {
- display: 'flex',
- gap: '2px'
- },
-
- '& .webchat__feedback-form__form': {
- display: 'flex',
- flexDirection: 'column',
- gap: '4px',
- position: 'relative',
- // The form should take the full width of the flex container width.
- width: '100%'
- },
-
- // TODO: Need review.
- '& .webchat__feedback-form__form-header': {
- color: '#373435',
- display: 'flex',
- flexDirection: 'column',
- fontFamily: CSSTokens.FontPrimary,
- fontSize: '14px',
- fontStyle: 'normal',
- fontWeight: 400,
- lineHeight: '20px'
- },
-
- // TODO: Need review.
- '& .webchat__feedback-form__form-footer': {
- color: CSSTokens.ColorSubtle,
- fontFamily: CSSTokens.FontPrimary,
- fontSize: '10px',
- fontStyle: 'normal',
- fontWeight: 400,
- lineHeight: '14px'
- },
-
- '& .webchat__feedback-form__submission-button-bar': {
- display: 'flex',
- gap: '8px',
- marginTop: '6px'
- },
-
- // TODO: Need review.
- '& .webchat__feedback-form__submit-button': {
- backgroundColor: CSSTokens.ColorAccent,
- border: `1px solid ${CSSTokens.ColorAccent}`,
- borderRadius: '4px',
- color: '#FFFFFF',
- cursor: 'pointer',
- fontSize: '12px',
- fontFamily: CSSTokens.FontPrimary,
- height: '24px',
- padding: '0 8px'
- },
-
- // TODO: Need review.
- '& .webchat__feedback-form__submit-button:hover': {
- backgroundColor: '#004a98',
- border: '1px solid #004a98',
- color: '#FFFFFF'
- },
-
- // TODO: Need review.
- '& .webchat__feedback-form__submit-button:active': {
- backgroundColor: '#004a98',
- border: '1px solid #004a98',
- color: '#FFFFFF'
- },
-
- // TODO: Need review.
- '& .webchat__feedback-form__cancel-button': {
- backgroundColor: '#FFFFFF',
- border: '1px solid #E8E8E8',
- borderRadius: '4px',
- color: CSSTokens.ColorSubtle,
- cursor: 'pointer',
- fontFamily: CSSTokens.FontPrimary,
- fontSize: '12px',
- height: '24px',
- padding: '0 8px'
- },
-
- // TODO: Need review.
- '& .webchat__feedback-form__cancel-button:hover': {
- backgroundColor: CSSTokens.ColorSubtle,
- color: 'White'
- }
- }
- };
-}
diff --git a/packages/component/src/Styles/StyleSet/FeedbackTextArea.ts b/packages/component/src/Styles/StyleSet/FeedbackTextArea.ts
deleted file mode 100644
index 489699b404..0000000000
--- a/packages/component/src/Styles/StyleSet/FeedbackTextArea.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import CSSTokens from '../CSSTokens';
-
-export default function createFeedbackTextAreaStyle() {
- return {
- '&.webchat__feedback-form-text-area': {
- display: 'grid',
- gridTemplateAreas: `'main'`,
- maxHeight: '200px',
- overflow: 'hidden',
- backgroundColor: '#FFFFFF',
- borderRadius: '4px',
- border: '1px solid #E8E8E8',
- fontFamily: CSSTokens.FontPrimary,
- fontSize: '14px',
- gap: '6px',
- lineHeight: '20px',
- padding: '8px 12px',
- position: 'relative',
- '&::after': {
- borderBottomLeftRadius: '4px',
- borderBottomRightRadius: '4px',
- borderBottom: `3px solid ${CSSTokens.ColorAccent}`,
- bottom: '-1px',
- clipPath: 'inset(calc(100% - 3px) 50% 0 50%)',
- content: '""',
- height: '4px',
- left: '-1px',
- position: 'absolute',
- right: '-1px',
- transition: 'clip-path 0 cubic-bezier(1, 0, 1, 1)'
- },
- '&:focus-within': {
- border: '1px solid #E8E8E8'
- },
- '&:focus-within::after': {
- clipPath: 'inset(calc(100% - 3px) 0 0 0)',
- transition: 'clip-path 200ms cubic-bezier(0, 0, 0, 1)'
- }
- },
- '&.webchat__feedback-form-text-area--hidden': {
- height: 0,
- visibility: 'collapse'
- },
- '.webchat__feedback-form-text-area-shared': {
- border: 'none',
- font: 'inherit',
- gridArea: 'main',
- outline: 'inherit',
- overflowWrap: 'anywhere',
- resize: 'inherit',
- scrollbarGutter: 'stable'
- },
- '.webchat__feedback-form-text-area-doppelganger': {
- overflow: 'hidden',
- visibility: 'hidden',
- whiteSpace: 'pre-wrap'
- },
- '.webchat__feedback-form-text-area-input': {
- backgroundColor: 'inherit',
- color: 'currentColor',
- height: '100%',
- padding: 0
- },
- '.webchat__feedback-form-text-area-input--scroll': {
- scrollbarColor: 'unset',
- scrollbarWidth: 'unset',
- MozScrollbarColor: `#373435 ${CSSTokens.ColorSubtle}`,
- MozScrollbarWidth: 'thin',
- '&::-webkit-scrollbar': {
- width: '8px'
- },
- '&::-webkit-scrollbar-thumb': {
- backgroundColor: CSSTokens.ColorSubtle,
- borderRadius: '10px'
- },
- '&::-webkit-scrollbar-corner': {
- backgroundColor: '#373435'
- }
- }
- };
-}
diff --git a/packages/component/src/Styles/createStyleSet.ts b/packages/component/src/Styles/createStyleSet.ts
index 394da47328..0bf25e8603 100644
--- a/packages/component/src/Styles/createStyleSet.ts
+++ b/packages/component/src/Styles/createStyleSet.ts
@@ -20,7 +20,6 @@ import createConnectivityNotification from './StyleSet/ConnectivityNotification'
import createDictationInterimsStyle from './StyleSet/DictationInterims';
import createErrorBoxStyle from './StyleSet/ErrorBox';
import createErrorNotificationStyle from './StyleSet/ErrorNotification';
-import createFeedbackFormStyle from './StyleSet/FeedbackForm';
import createFileContentStyle from './StyleSet/FileContent';
import createImageAvatarStyle from './StyleSet/ImageAvatar';
import createInitialsAvatarStyle from './StyleSet/InitialsAvatar';
@@ -53,7 +52,6 @@ import createViewCodeDialogStyle from './StyleSet/ViewCodeDialog';
import createVimeoContentStyle from './StyleSet/VimeoContent';
import createWarningNotificationStyle from './StyleSet/WarningNotification';
import createYouTubeContentStyle from './StyleSet/YouTubeContent';
-import createFeedbackTextAreaStyle from './StyleSet/FeedbackTextArea';
// TODO: [P4] We should add a notice for people who want to use "styleSet" instead of "styleOptions".
// "styleSet" is actually CSS stylesheet and it is based on the DOM tree.
@@ -111,8 +109,6 @@ export default function createStyleSet(styleOptions: StyleOptions) {
// - Use CSS var instead of strictStyleOptions
chatHistoryBox: createChatHistoryBoxStyleSet(),
citationModalDialog: createCitationModalDialogStyle(),
- feedbackForm: createFeedbackFormStyle(),
- feedbackTextArea: createFeedbackTextAreaStyle(),
linkDefinitions: createLinkDefinitionsStyle(),
modalDialog: createModalDialogStyle(),
renderMarkdown: createRenderMarkdownStyle(),
diff --git a/packages/component/src/TextArea/TextArea.module.css b/packages/component/src/TextArea/TextArea.module.css
new file mode 100644
index 0000000000..48e0f1257b
--- /dev/null
+++ b/packages/component/src/TextArea/TextArea.module.css
@@ -0,0 +1,75 @@
+:global(.webchat) .text-area {
+ display: grid;
+ font-family: var(--webchat__font--primary);
+ grid-template-areas: 'main';
+ max-height: var(--webchat__text-area--max-height, 200px);
+ overflow: auto;
+ scrollbar-gutter: stable;
+}
+
+:global(.webchat) .text-area--hidden {
+ /* TODO: Not perfect way of hiding the text box. */
+ height: 0;
+ visibility: collapse;
+}
+
+:global(.webchat) .text-area--in-completion {
+ .text-area-doppelganger {
+ visibility: unset;
+ }
+
+ .text-area-input {
+ background-color: transparent;
+ caret-color: var(--webchat__text-area--carret-color, #242424);
+ color: transparent;
+ }
+
+ textarea::placeholder {
+ color: transparent;
+ }
+}
+
+:global(.webchat) .text-area-shared {
+ border: none;
+ font: inherit;
+ grid-area: main;
+ outline: inherit;
+ overflow-wrap: anywhere;
+ resize: inherit;
+}
+
+:global(.webchat) .text-area-doppelganger {
+ overflow: visible;
+ pointer-events: none;
+ user-select: none;
+ visibility: hidden;
+ white-space: pre-wrap;
+}
+
+:global(.webchat) .text-area-input {
+ background-color: inherit;
+ color: currentColor;
+ contain: size;
+ overflow: hidden;
+ padding: 0;
+}
+
+:global(.webchat) .text-area--scroll {
+ scrollbar-color: unset;
+ scrollbar-width: unset;
+ -moz-scrollbar-color: #373435 var(--webchat__color--subtle);
+ -moz-scrollbar-width: thin;
+
+ &::-webkit-scrollbar {
+ width: 8px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: var(--webchat__color--subtle);
+ border-radius: 10px;
+ }
+
+ &::-webkit-scrollbar-corner {
+ background-color: #373435;
+ }
+}
diff --git a/packages/fluent-theme/src/components/sendBox/TextArea.tsx b/packages/component/src/TextArea/TextArea.tsx
similarity index 82%
rename from packages/fluent-theme/src/components/sendBox/TextArea.tsx
rename to packages/component/src/TextArea/TextArea.tsx
index 92c3539602..808802fbe0 100644
--- a/packages/fluent-theme/src/components/sendBox/TextArea.tsx
+++ b/packages/component/src/TextArea/TextArea.tsx
@@ -1,4 +1,5 @@
import { hooks } from 'botframework-webchat-api';
+import { useStyles } from 'botframework-webchat-styles/react';
import cx from 'classnames';
import React, {
forwardRef,
@@ -9,7 +10,7 @@ import React, {
type KeyboardEventHandler,
type ReactNode
} from 'react';
-import { useStyles } from '../../styles';
+
import styles from './TextArea.module.css';
const { useUIState } = hooks;
@@ -66,27 +67,25 @@ const TextArea = forwardRef<
return (
{uiState === 'blueprint' ? (
-
- {' '}
-
+
) : (
-
+
{props.completion ? props.completion : props.value || props.placeholder}{' '}