Import @tailwindcss/typography for markdown styling.

THIRD-PARTY-NOTICES

@@ -1192,6 +1192,7 @@ limitations under the License.
 The following NPM packages may be included in this product:
 
  - @tailwindcss/forms@0.5.10
+ - @tailwindcss/typography@0.5.16
  - tailwindcss@3.4.17
 
 These packages each contain the following license and notice below:
@@ -3435,6 +3436,7 @@ THE SOFTWARE.
 The following NPM packages may be included in this product:
 
  - lodash-es@4.17.21
+ - lodash.merge@4.6.2
  - lodash@4.17.21
 
 These packages each contain the following license and notice below:
@@ -3489,6 +3491,94 @@ terms above.
 
 -----------
 
+The following NPM package may be included in this product:
+
+ - lodash.castarray@4.4.0
+
+This package contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
+Based on Underscore.js, copyright 2009-2016 Jeremy Ashkenas,
+DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - lodash.isplainobject@4.0.6
+
+This package contains the following license and notice below:
+
+Copyright jQuery Foundation and other contributors <https://jquery.org/>
+
+Based on Underscore.js, copyright Jeremy Ashkenas,
+DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
+
+This software consists of voluntary contributions made by many
+individuals. For exact contribution history, see the revision history
+available at https://github.com/lodash/lodash
+
+The following license applies to all parts of this software except as
+documented below:
+
+====
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+====
+
+Copyright and related rights for sample code are waived via CC0. Sample
+code is defined as all source code displayed within the prose of the
+documentation.
+
+CC0: http://creativecommons.org/publicdomain/zero/1.0/
+
+====
+
+Files located in the node_modules and vendor directories are externally
+maintained libraries used by this software which have their own
+licenses; we recommend you read them, as their terms may differ from the
+terms above.
+
+-----------
+
 The following NPM packages may be included in this product:
 
  - longest-streak@2.0.4
@@ -4680,11 +4770,12 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 -----------
 
-The following NPM package may be included in this product:
+The following NPM packages may be included in this product:
 
+ - postcss-selector-parser@6.0.10
  - postcss-selector-parser@6.1.2
 
-This package contains the following license and notice below:
+These packages each contain the following license and notice below:
 
 Copyright (c) Ben Briggs <beneb.info@gmail.com> (http://beneb.info)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/search-ui-react",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "description": "A library of React Components for powering Yext Search integrations",
   "author": "watson@yext.com",
   "license": "BSD-3-Clause",
@@ -157,6 +157,7 @@
     "@restart/ui": "^1.0.1",
     "@tailwindcss/forms": "^0.5.0",
     "@tailwindcss/line-clamp": "^0.4.4",
+    "@tailwindcss/typography": "^0.5.9",
     "@yext/analytics": "^0.6.8",
     "classnames": "^2.3.1",
     "lodash": "^4.17.21",

src/components/GenerativeDirectAnswer.tsx

@@ -9,8 +9,8 @@ import { useComposedCssClasses } from '../hooks';
 import { useCardAnalytics } from '../hooks/useCardAnalytics';
 import { DefaultRawDataType } from '../models/index';
 import { executeGenerativeDirectAnswer } from '../utils/search-operations';
-import { Markdown } from './Markdown';
-import React from 'react';
+import { Markdown, MarkdownCssClasses } from './Markdown';
+import React, { useMemo } from 'react';
 
 /**
  * The CSS class interface used for {@link GenerativeDirectAnswer}.
@@ -31,7 +31,7 @@ export interface GenerativeDirectAnswerCssClasses {
 const builtInCssClasses: Readonly<GenerativeDirectAnswerCssClasses> = {
   container: 'p-6 border border-gray-200 rounded-lg shadow-sm',
   header: 'text-xl',
-  answerText: 'mt-4',
+  answerText: 'mt-4 prose',
   divider: 'border-b border-gray-200 w-full pb-6 mb-6',
   citationsContainer: 'mt-4 flex overflow-x-auto gap-4',
   citation: 'p-4 border border-gray-200 rounded-lg shadow-sm bg-slate-100 flex flex-col grow-0 shrink-0 basis-64 text-sm text-neutral overflow-x-auto cursor-pointer hover:border-indigo-500',
@@ -144,14 +144,22 @@ function Answer(props: AnswerProps) {
     answerHeader = 'AI Generated Answer',
     linkClickHandler
   } = props;
+
+  const markdownCssClasses: MarkdownCssClasses = useMemo(
+    () => ({
+      container: cssClasses.answerText,
+    }),
+    [cssClasses.answerText]
+  );
+
   return <>
     <div className={cssClasses.header}>
       {answerHeader}
     </div>
     <Markdown
       content={gdaResponse.directAnswer}
       onLinkClick={(destinationUrl) => destinationUrl && linkClickHandler?.({destinationUrl})}
-      customCssClasses={cssClasses}
+      customCssClasses={markdownCssClasses}
     />
   </>;
 }

tailwind.config.cjs

@@ -35,6 +35,7 @@ module.exports = {
     require('@tailwindcss/forms')({
       strategy: 'class',
     }),
-    require('@tailwindcss/line-clamp')
+    require('@tailwindcss/line-clamp'),
+    require("@tailwindcss/typography")
   ],
 };