AI Responses now handle Markdown

samples/react-azure-openai-api-stream/README.md

@@ -44,13 +44,15 @@ This sample is optimally compatible with the following environment configuration
 
 ## Contributors
 
-- [Luis Mañez](https://github.com/luismanez) |
+- [Luis Mañez](https://github.com/luismanez)
+- [Chris Kent](https://twitter.com/thechriskent)
 
 ## Version history
 
 | Version | Date             | Comments        |
 | ------- | ---------------- | --------------- |
 | 1.0     | January 2, 2024 | Initial release |
+| 1.1     | January 29, 2024 | Things and Stuff |
 
 
 ## Minimal Path to Awesome

samples/react-azure-openai-api-stream/gulpfile.js

@@ -13,4 +13,10 @@ build.rig.getTasks = function () {
   return result;
 };
 
+/* fast-serve */
+const { addFastServe } = require("spfx-fast-serve-helpers");
+addFastServe(build);
+/* end of fast-serve */
+
 build.initialize(require('gulp'));
+

samples/react-azure-openai-api-stream/package.json

@@ -9,7 +9,8 @@
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
-    "test": "gulp test"
+    "test": "gulp test",
+    "serve": "fast-serve"
   },
   "dependencies": {
     "@fluentui/react": "^8.106.4",
@@ -25,6 +26,8 @@
     "@pnp/spfx-property-controls": "3.15.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-remark": "^2.1.0",
+    "remark-gfm": "1.0.0",
     "tslib": "2.3.1"
   },
   "devDependencies": {
@@ -41,6 +44,7 @@
     "eslint": "8.7.0",
     "eslint-plugin-react-hooks": "4.3.0",
     "gulp": "4.0.2",
+    "spfx-fast-serve-helpers": "~1.18.0",
     "typescript": "4.7.4"
   }
 }

samples/react-azure-openai-api-stream/src/webparts/chatStreaming/components/AssistantResponse.tsx

@@ -2,6 +2,7 @@ import { Stack } from "@fluentui/react";
 import { Icon } from '@fluentui/react';
 import * as React from "react";
 import styles from "./ChatStreaming.module.scss";
+import MarkdownContent from "./MarkdownContent";
 
 export interface IAssistantResponseProps {
   message: string;
@@ -18,7 +19,7 @@ export default class AssistantResponse extends React.Component<
           <Icon iconName="Robot" />
         </div>
         <div className={styles.messageBox}>
-          <p className={styles.message}>{this.props.message}</p>
+          <MarkdownContent className={styles.message}>{this.props.message}</MarkdownContent>
           <div className={styles.beak}/>
         </div>
       </Stack>

samples/react-azure-openai-api-stream/src/webparts/chatStreaming/components/ChatStreaming.module.scss

@@ -67,6 +67,10 @@
     justify-content: center;
   }
 
+  .message {
+    margin: 14px 0;
+  }
+
   .beak {
     left: -15px;
     border-right: 15px solid "[theme:white, default: #ffffff]";
@@ -103,4 +107,45 @@
 
 .userMessage {
   gap: 5px;
+}
+
+.markdownContent {
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    display: block;
+    margin: 14px 0;
+    width: max-content;
+    max-width: fit-content;
+    overflow: auto;
+  }
+  
+  tr {
+    background-color: "[theme: white, default: #ffffff]";
+    border-top: 1px solid "[theme: neutralTertiaryAlt, default: #c8c6c4]";
+  }
+  
+  tr:nth-child(2n) {
+    background-color: "[theme: neutralLight, default: #edebe9]";
+  }
+  
+  td,
+  th {
+    padding: 6px 13px;
+    border: 1px solid "[theme: neutralTertiaryAlt, default: #c8c6c4]";
+  }
+  
+  th {
+    font-weight: 600;
+  }
+  
+  table img {
+    background-color: transparent;
+  }
+
+  pre {
+    background-color: "[theme: neutralLight, default: #edebe9]";
+    padding: 8px;
+    border-radius: 4px;
+  }
 }

samples/react-azure-openai-api-stream/src/webparts/chatStreaming/components/MarkdownContent.tsx

@@ -0,0 +1,23 @@
+import { css } from "@fluentui/react";
+import * as React from "react";
+import styles from "./ChatStreaming.module.scss";
+import { Remark } from "react-remark";
+import remarkGfm from "remark-gfm";
+
+export interface IMarkdownContentProps {
+  children: string;
+  className?: string;
+}
+
+export default class MarkdownContent extends React.Component<
+  IMarkdownContentProps,
+  {}
+> {
+  public render(): React.ReactElement<IMarkdownContentProps> {
+    return (
+      <div className={css(styles.markdownContent, this.props.className)}>
+        <Remark remarkPlugins={[remarkGfm]}>{this.props.children}</Remark>
+      </div>
+    );
+  }
+}

samples/react-azure-openai-api-stream/tsconfig.json

@@ -13,6 +13,7 @@
     "outDir": "lib",
     "inlineSources": false,
     "noImplicitAny": true,
+    "allowSyntheticDefaultImports": true,
 
     "typeRoots": [
       "./node_modules/@types",