@@ -85,4 +85,4 @@ BasicSendBox.propTypes = {
export default BasicSendBox;
-export { useSendBoxDictationStarted };
+export { useSendBoxSpeechInterimsVisible };
diff --git a/packages/component/src/BasicTranscript.js b/packages/component/src/BasicTranscript.js
index 0bfa715684..5532684314 100644
--- a/packages/component/src/BasicTranscript.js
+++ b/packages/component/src/BasicTranscript.js
@@ -3,13 +3,14 @@ import { css } from 'glamor';
import { Panel as ScrollToBottomPanel } from 'react-scroll-to-bottom';
import classNames from 'classnames';
import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useMemo } from 'react';
-import connectToWebChat from './connectToWebChat';
import ScrollToEndButton from './Activity/ScrollToEndButton';
import SpeakActivity from './Activity/Speak';
import useActivities from './hooks/useActivities';
import useGroupTimestamp from './hooks/useGroupTimestamp';
+import useRenderActivity from './hooks/useRenderActivity';
+import useRenderAttachment from './hooks/useRenderAttachment';
import useStyleOptions from './hooks/useStyleOptions';
import useStyleSet from './hooks/useStyleSet';
import useWebSpeechPonyfill from './hooks/useWebSpeechPonyfill';
@@ -61,31 +62,54 @@ function sameTimestampGroup(activityX, activityY, groupTimestamp) {
return false;
}
-const BasicTranscript = ({ activityRenderer, attachmentRenderer, className }) => {
+const BasicTranscript = ({ className }) => {
const [{ activities: activitiesStyleSet, activity: activityStyleSet }] = useStyleSet();
const [{ hideScrollToEndButton }] = useStyleOptions();
+ const [{ speechSynthesis, SpeechSynthesisUtterance } = {}] = useWebSpeechPonyfill();
const [activities] = useActivities();
const [groupTimestamp] = useGroupTimestamp();
- const [{ speechSynthesis, SpeechSynthesisUtterance } = {}] = useWebSpeechPonyfill();
+ const renderAttachment = useRenderAttachment();
+ const renderActivity = useRenderActivity(renderAttachment);
// We use 2-pass approach for rendering activities, for show/hide timestamp grouping.
// Until the activity pass thru middleware, we never know if it is going to show up.
// After we know which activities will show up, we can compute which activity will show timestamps.
// If the activity does not render, it will not be spoken if text-to-speech is enabled.
- const activityElements = activities.reduce((activityElements, activity) => {
- const element = activityRenderer({
- activity,
- timestampClassName: 'transcript-timestamp'
- })(({ attachment }) => attachmentRenderer({ activity, attachment }));
+ const activityElements = useMemo(
+ () =>
+ activities.reduce((activityElements, activity) => {
+ const element = renderActivity({
+ activity,
+ timestampClassName: 'transcript-timestamp'
+ });
+
+ element && activityElements.push({ activity, element });
+
+ return activityElements;
+ }, []),
+ [activities, renderActivity]
+ );
+
+ const activityElementsWithMetadata = useMemo(
+ () =>
+ activityElements.map((activityElement, index) => {
+ const { activity } = activityElement;
+ const { activity: nextActivity } = activityElements[index + 1] || {};
- element &&
- activityElements.push({
- activity,
- element
- });
+ return {
+ ...activityElement,
- return activityElements;
- }, []);
+ key: (activity.channelData && activity.channelData.clientActivityID) || activity.id || index,
+
+ // TODO: [P2] We should use core/definitions/speakingActivity for this predicate instead
+ shouldSpeak: activity.channelData && activity.channelData.speak,
+
+ // Hide timestamp if same timestamp group with the next activity
+ timestampVisible: !sameTimestampGroup(activity, nextActivity, groupTimestamp)
+ };
+ }),
+ [activityElements, groupTimestamp]
+ );
return (
@@ -103,24 +127,19 @@ const BasicTranscript = ({ activityRenderer, attachmentRenderer, className }) =>
className={classNames(LIST_CSS + '', activitiesStyleSet + '')}
role="list"
>
- {activityElements.map(({ activity, element }, index) => (
+ {activityElementsWithMetadata.map(({ activity, element, key, timestampVisible, shouldSpeak }) => (
{element}
- {// TODO: [P2] We should use core/definitions/speakingActivity for this predicate instead
- activity.channelData && activity.channelData.speak && }
+ {shouldSpeak && }
))}
@@ -136,12 +155,7 @@ BasicTranscript.defaultProps = {
};
BasicTranscript.propTypes = {
- activityRenderer: PropTypes.func.isRequired,
- attachmentRenderer: PropTypes.func.isRequired,
className: PropTypes.string
};
-export default connectToWebChat(({ activityRenderer, attachmentRenderer }) => ({
- activityRenderer,
- attachmentRenderer
-}))(BasicTranscript);
+export default BasicTranscript;
diff --git a/packages/component/src/Dictation.js b/packages/component/src/Dictation.js
index a72daaea26..9e26ffe155 100644
--- a/packages/component/src/Dictation.js
+++ b/packages/component/src/Dictation.js
@@ -3,12 +3,11 @@ import { Constants } from 'botframework-webchat-core';
import PropTypes from 'prop-types';
import React, { useCallback, useMemo } from 'react';
-import connectToWebChat from './connectToWebChat';
-
import useActivities from './hooks/useActivities';
import useDictateInterims from './hooks/useDictateInterims';
import useDictateState from './hooks/useDictateState';
import useDisabled from './hooks/useDisabled';
+import useEmitTypingIndicator from './hooks/useEmitTypingIndicator';
import useLanguage from './hooks/useLanguage';
import useSendBoxValue from './hooks/useSendBoxValue';
import useSendTypingIndicator from './hooks/useSendTypingIndicator';
@@ -22,7 +21,7 @@ const {
DictateState: { DICTATING, IDLE, STARTING }
} = Constants;
-const Dictation = ({ emitTypingIndicator, onError }) => {
+const Dictation = ({ onError }) => {
const [, setDictateInterims] = useDictateInterims();
const [, setSendBox] = useSendBoxValue();
const [, setShouldSpeakIncomingActivity] = useShouldSpeakIncomingActivity();
@@ -32,6 +31,7 @@ const Dictation = ({ emitTypingIndicator, onError }) => {
const [disabled] = useDisabled();
const [language] = useLanguage();
const [sendTypingIndicator] = useSendTypingIndicator();
+ const emitTypingIndicator = useEmitTypingIndicator();
const setDictateState = useSetDictateState();
const stopDictate = useStopDictate();
const submitSendBox = useSubmitSendBox();
@@ -103,10 +103,7 @@ Dictation.defaultProps = {
};
Dictation.propTypes = {
- emitTypingIndicator: PropTypes.func.isRequired,
onError: PropTypes.func
};
-export default connectToWebChat(({ emitTypingIndicator }) => ({
- emitTypingIndicator
-}))(Dictation);
+export default Dictation;
diff --git a/packages/component/src/SendBox/DictationInterims.js b/packages/component/src/SendBox/DictationInterims.js
index 4ed56b1140..a8a0656c73 100644
--- a/packages/component/src/SendBox/DictationInterims.js
+++ b/packages/component/src/SendBox/DictationInterims.js
@@ -8,9 +8,9 @@ import React from 'react';
import { Constants } from 'botframework-webchat-core';
import connectToWebChat from '../connectToWebChat';
-import Localize from '../Localization/Localize';
import useDictateInterims from '../hooks/useDictateInterims';
import useDictateState from '../hooks/useDictateState';
+import useLocalize from '../hooks/useLocalize';
import useStyleSet from '../hooks/useStyleSet';
const {
@@ -37,9 +37,12 @@ const DictationInterims = ({ className }) => {
const [dictateState] = useDictateState();
const [{ dictationInterims: dictationInterimsStyleSet }] = useStyleSet();
+ const listeningText = useLocalize('Listening\u2026');
+ const startingText = useLocalize('Starting\u2026');
+
return dictateState === STARTING || dictateState === STOPPING ? (
- {dictateState === STARTING && }
+ {dictateState === STARTING && startingText}
) : (
dictateState === DICTATING &&
@@ -54,7 +57,7 @@ const DictationInterims = ({ className }) => {
) : (
-
+ {listeningText}
))
);
diff --git a/packages/component/src/SendBox/MicrophoneButton.js b/packages/component/src/SendBox/MicrophoneButton.js
index 22ee23839d..e2ae7c5519 100644
--- a/packages/component/src/SendBox/MicrophoneButton.js
+++ b/packages/component/src/SendBox/MicrophoneButton.js
@@ -132,7 +132,6 @@ const useMicrophoneButtonClick = () => {
]);
};
-// TODO: [P1] We temporarily not exporting this hook because it requires legacy HOC code
function useMicrophoneButtonDisabled() {
const [dictateState] = useDictateState();
const [disabled] = useDisabled();
diff --git a/packages/component/src/SendBox/TextBox.js b/packages/component/src/SendBox/TextBox.js
index 307d8730c9..b0b14d0d2b 100644
--- a/packages/component/src/SendBox/TextBox.js
+++ b/packages/component/src/SendBox/TextBox.js
@@ -10,6 +10,7 @@ import useFocusSendBox from '../hooks/useFocusSendBox';
import useLocalize from '../hooks/useLocalize';
import useScrollToEnd from '../hooks/useScrollToEnd';
import useSendBoxValue from '../hooks/useSendBoxValue';
+import useStopDictate from '../hooks/useStopDictate';
import useStyleOptions from '../hooks/useStyleOptions';
import useStyleSet from '../hooks/useStyleSet';
import useSubmitSendBox from '../hooks/useSubmitSendBox';
@@ -75,12 +76,9 @@ function useTextBoxSubmit(setFocus) {
}, [focusSendBox, scrollToEnd, sendBoxValue, setFocus, submitSendBox]);
}
-// TODO: [P1] Hook is temporarily not exporting until fully implemented
-function useTextBoxValue({ stopDictate }) {
+function useTextBoxValue() {
const [value, setSendBox] = useSendBoxValue();
-
- // TODO: [P1] Temporarily using non-hook version
- // const stopDictate = useStopDictate();
+ const stopDictate = useStopDictate();
const setter = useCallback(
value => {
@@ -93,11 +91,11 @@ function useTextBoxValue({ stopDictate }) {
return [value, setter];
}
-const TextBox = ({ className, stopDictate }) => {
+const TextBox = ({ className }) => {
const [{ sendBoxTextWrap }] = useStyleOptions();
const [{ sendBoxTextArea: sendBoxTextAreaStyleSet, sendBoxTextBox: sendBoxTextBoxStyleSet }] = useStyleSet();
const [disabled] = useDisabled();
- const [textBoxValue, setTextBoxValue] = useTextBoxValue({ stopDictate });
+ const [textBoxValue, setTextBoxValue] = useTextBoxValue();
const submitTextBox = useTextBoxSubmit();
const sendBoxString = useLocalize('Sendbox');
@@ -177,13 +175,9 @@ TextBox.defaultProps = {
};
TextBox.propTypes = {
- className: PropTypes.string,
- stopDictate: PropTypes.func.isRequired
+ className: PropTypes.string
};
-export default connectToWebChat(({ stopDictate }) => ({ stopDictate }))(TextBox);
-
-// TODO: [P1] Export useTextBoxValue when it is fully implemented
-// export { connectSendTextBox, useTextBoxSubmit, useTextBoxValue };
+export default TextBox;
-export { connectSendTextBox, useTextBoxSubmit };
+export { connectSendTextBox, useTextBoxSubmit, useTextBoxValue };
diff --git a/packages/component/src/hooks/index.js b/packages/component/src/hooks/index.js
index 57e1b47aad..16e6e6f303 100644
--- a/packages/component/src/hooks/index.js
+++ b/packages/component/src/hooks/index.js
@@ -17,6 +17,8 @@ import useMarkActivityAsSpoken from './useMarkActivityAsSpoken';
import usePerformCardAction from './usePerformCardAction';
import usePostActivity from './usePostActivity';
import useReferenceGrammarID from './useReferenceGrammarID';
+import useRenderActivity from './useRenderActivity';
+import useRenderAttachment from './useRenderAttachment';
import useRenderMarkdownAsHTML from './useRenderMarkdownAsHTML';
import useScrollToEnd from './useScrollToEnd';
import useSendBoxValue from './useSendBoxValue';
@@ -40,8 +42,8 @@ import useVoiceSelector from './useVoiceSelector';
import useWebSpeechPonyfill from './useWebSpeechPonyfill';
import { useMicrophoneButtonClick, useMicrophoneButtonDisabled } from '../SendBox/MicrophoneButton';
-import { useSendBoxDictationStarted } from '../BasicSendBox';
-import { useTextBoxSubmit } from '../SendBox/TextBox';
+import { useSendBoxSpeechInterimsVisible } from '../BasicSendBox';
+import { useTextBoxSubmit, useTextBoxValue } from '../SendBox/TextBox';
import { useTypingIndicatorVisible } from '../SendBox/TypingIndicator';
export {
@@ -66,9 +68,11 @@ export {
usePerformCardAction,
usePostActivity,
useReferenceGrammarID,
+ useRenderActivity,
+ useRenderAttachment,
useRenderMarkdownAsHTML,
useScrollToEnd,
- useSendBoxDictationStarted,
+ useSendBoxSpeechInterimsVisible,
useSendBoxValue,
useSendEvent,
useSendFiles,
@@ -84,6 +88,7 @@ export {
useSubmitSendBox,
useSuggestedActions,
useTextBoxSubmit,
+ useTextBoxValue,
useTimeoutForSend,
useTypingIndicatorVisible,
useUserID,
diff --git a/packages/component/src/hooks/useRenderActivity.js b/packages/component/src/hooks/useRenderActivity.js
new file mode 100644
index 0000000000..5e2897df8a
--- /dev/null
+++ b/packages/component/src/hooks/useRenderActivity.js
@@ -0,0 +1,21 @@
+import { useCallback, useContext } from 'react';
+
+import WebChatUIContext from '../WebChatUIContext';
+
+export default function useRenderActivity(renderAttachment) {
+ const { activityRenderer } = useContext(WebChatUIContext);
+
+ return useCallback(
+ ({ activity, ...renderActivityArgs }) =>
+ activityRenderer({
+ activity,
+ ...renderActivityArgs
+ })(renderAttachmentArgs =>
+ renderAttachment({
+ activity,
+ ...renderAttachmentArgs
+ })
+ ),
+ [activityRenderer, renderAttachment]
+ );
+}
diff --git a/packages/component/src/hooks/useRenderAttachment.js b/packages/component/src/hooks/useRenderAttachment.js
new file mode 100644
index 0000000000..0a295fa3a6
--- /dev/null
+++ b/packages/component/src/hooks/useRenderAttachment.js
@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import WebChatUIContext from '../WebChatUIContext';
+
+export default function useRenderAttachment() {
+ return useContext(WebChatUIContext).attachmentRenderer;
+}
diff --git a/packages/component/src/hooks/useRenderMarkdownAsHTML.js b/packages/component/src/hooks/useRenderMarkdownAsHTML.js
index 2879216ac1..21c61aeb45 100644
--- a/packages/component/src/hooks/useRenderMarkdownAsHTML.js
+++ b/packages/component/src/hooks/useRenderMarkdownAsHTML.js
@@ -5,7 +5,7 @@ import WebChatUIContext from '../WebChatUIContext';
export default function useRenderMarkdownAsHTML() {
const { renderMarkdown } = useContext(WebChatUIContext);
- const styleOptions = useStyleOptions();
+ const [styleOptions] = useStyleOptions();
return useCallback(markdown => renderMarkdown(markdown, styleOptions), [renderMarkdown, styleOptions]);
}
diff --git a/packages/component/src/hooks/useShouldSpeakIncomingActivity.js b/packages/component/src/hooks/useShouldSpeakIncomingActivity.js
index 6bda739e29..27bf0b2313 100644
--- a/packages/component/src/hooks/useShouldSpeakIncomingActivity.js
+++ b/packages/component/src/hooks/useShouldSpeakIncomingActivity.js
@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useCallback, useContext } from 'react';
import { useSelector } from '../WebChatReduxContext';
import WebChatUIContext from '../WebChatUIContext';
@@ -8,8 +8,11 @@ export default function useShouldSpeakIncomingActivity() {
return [
useSelector(({ shouldSpeakIncomingActivity }) => shouldSpeakIncomingActivity),
- value => {
- value ? startSpeakingActivity() : stopSpeakingActivity();
- }
+ useCallback(
+ value => {
+ value ? startSpeakingActivity() : stopSpeakingActivity();
+ },
+ [startSpeakingActivity, stopSpeakingActivity]
+ )
];
}
diff --git a/packages/component/src/hooks/useSuggestedActions.js b/packages/component/src/hooks/useSuggestedActions.js
index c80cd1f91c..52375865e2 100644
--- a/packages/component/src/hooks/useSuggestedActions.js
+++ b/packages/component/src/hooks/useSuggestedActions.js
@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useCallback, useContext } from 'react';
import { useSelector } from '../WebChatReduxContext';
import WebChatUIContext from '../WebChatUIContext';
@@ -9,12 +9,15 @@ export default function useSuggestedActions() {
return [
value,
- value => {
- if (value && value.length) {
- throw new Error('SuggestedActions cannot be set to values other than empty.');
- }
+ useCallback(
+ value => {
+ if (value && value.length) {
+ throw new Error('SuggestedActions cannot be set to values other than empty.');
+ }
- clearSuggestedActions();
- }
+ clearSuggestedActions();
+ },
+ [clearSuggestedActions]
+ )
];
}