Add word-wrap to messageActivity

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 - Fix [#1423](https://github.com/Microsoft/BotFramework-WebChat/issues/1423). Added sample for hosting WebChat in Angular, by [@omarsourour](https://github.com/omarsourour) in PR [#1813](https://github.com/Microsoft/BotFramework-WebChat/pull/1813)
 - Fix [#1767](https://github.com/Microsoft/BotFramework-WebChat/issues/1767). Remove `cursor: pointer` from buttons, by [@corinagum](https://github.com/corinagum) in PR [#1819](https://github.com/Microsoft/BotFramework-WebChat/pull/1819)
+- Fix [#1774](https://github.com/Microsoft/BotFramework-WebChat/issues/1774). Add `styleSetOption` to allow word break. Default to `break-word`, by [@corinagum](https://github.com/corinagum) in PR [#1832](https://github.com/Microsoft/BotFramework-WebChat/pull/1832)
 
 ## [4.3.0] - 2019-03-04
 

__tests__/basic.js

@@ -20,3 +20,46 @@ test('setup', async () => {
 
   expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
 });
+
+test('long URLs with break-word', async () => {
+  const { driver, pageObjects} = await setupWebDriver();
+
+  await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/')
+
+  await driver.wait(minNumActivitiesShown(2), 2000);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('long URLs with break-all', async () => {
+  const WEB_CHAT_PROPS = { styleOptions: { messageActivityWordBreak: 'break-all' } };
+
+  const { driver, pageObjects} = await setupWebDriver({ props: WEB_CHAT_PROPS });
+
+  await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/')
+
+  await driver.wait(minNumActivitiesShown(2), 2000);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('long URLs with keep-all', async () => {
+  const WEB_CHAT_PROPS = { styleOptions: { messageActivityWordBreak: 'keep-all' } };
+
+  const { driver, pageObjects} = await setupWebDriver({ props: WEB_CHAT_PROPS });
+
+  await pageObjects.sendMessageViaSendBox('箸より重いものを持ったことがない箸より重いものを持ったことがない')
+
+  await driver.wait(minNumActivitiesShown(2), 2000);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});

packages/component/src/Styles/StyleSet/Bubble.js

@@ -8,11 +8,13 @@ export default function createBubbleStyle({
   bubbleFromUserTextColor,
   bubbleMaxWidth,
   bubbleMinHeight,
-  bubbleTextColor
+  bubbleTextColor,
+  messageActivityWordBreak
 }) {
   return {
     maxWidth: bubbleMaxWidth,
     minHeight: bubbleMinHeight,
+    wordBreak: messageActivityWordBreak,
 
     '&:not(.from-user)': {
       background: bubbleBackground,

packages/component/src/Styles/defaultStyleSetOptions.js

@@ -14,6 +14,9 @@ const DEFAULT_OPTIONS = {
   paddingWide: 20,
   subtle: DEFAULT_SUBTLE,
 
+  // Word break
+  messageActivityWordBreak: 'break-word', // 'normal' || 'break-all' || 'break-word' || 'keep-all'
+
   // fonts
   primaryFont: fontFamily(['Calibri', 'Helvetica Neue', 'Arial', 'sans-serif']),
   monospaceFont: fontFamily(['Consolas', 'Courier New', 'monospace']),
@@ -43,7 +46,7 @@ const DEFAULT_OPTIONS = {
   // Root
   rootHeight: '100%',
   rootWidth: '100%',
-  
+
   // Send box
   hideSendBox: false,
   hideUploadButton: false,