Markdown Toggle

Makes it easier to compare/contrast what Markdown support adds

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

@@ -6,6 +6,7 @@ import MarkdownContent from "./MarkdownContent";
 
 export interface IAssistantResponseProps {
   message: string;
+  disableMarkdown?: boolean;
 }
 
 export default class AssistantResponse extends React.Component<
@@ -19,7 +20,12 @@ export default class AssistantResponse extends React.Component<
           <Icon iconName="Robot" />
         </div>
         <div className={styles.messageBox}>
+          {this.props.disableMarkdown && 
+            <p className={styles.message}>{this.props.message}</p>
+          }
+          {!this.props.disableMarkdown &&
             <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.tsx

@@ -25,7 +25,8 @@ export default class ChatStreaming extends React.Component<IChatStreamingProps,
         role: 'assistant',
         text: 'Hello! I am your AI assistant. How can I help you today?'
       }],
-      thinking: false
+      thinking: false,
+      disableMarkdown: false,
     }
 
     this._controller = new AbortController();
@@ -37,7 +38,7 @@ export default class ChatStreaming extends React.Component<IChatStreamingProps,
     const content = this._validateWebPartProperties() ? (
       <Stack className={css(styles.chatStreaming, this.props.hasTeamsContext && styles.teams)}>
         <Stack.Item grow className={styles.messagesContainer}>
-          <MessagesList messages={this.state.sessionMessages} />
+          <MessagesList messages={this.state.sessionMessages} disableMarkdown={this.state.disableMarkdown} />
         </Stack.Item>
         {this.state.thinking && (
           <Stack.Item>
@@ -52,9 +53,11 @@ export default class ChatStreaming extends React.Component<IChatStreamingProps,
         <Stack.Item>
           <UserMessage
             textFieldValue={this.state.userQuery}
-            onMessageChange={this._onUserQueryChange}
-            sendQuery={this._onQuerySent}
+            onMessageChange={this._onUserQueryChange.bind(this)}
+            sendQuery={this._onQuerySent.bind(this)}
             controller={this._controller}
+            disableMarkdown={this.state.disableMarkdown}
+            toggleMarkdown={this._toggleMarkdown.bind(this)}
           />
         </Stack.Item>
       </Stack>
@@ -175,4 +178,10 @@ export default class ChatStreaming extends React.Component<IChatStreamingProps,
 
     return true;
   }
+
+  private _toggleMarkdown(): void {
+    this.setState({
+      disableMarkdown: !this.state.disableMarkdown
+    });
+  }
 }

samples/react-azure-openai-api-stream/src/webparts/chatStreaming/components/IChatStreamingState.ts

@@ -4,4 +4,5 @@ export interface IChatStreamingState {
   userQuery: string;
   sessionMessages: IChatMessage[];
   thinking: boolean;
+  disableMarkdown: boolean;
 }

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

@@ -8,6 +8,7 @@ import { ScrollablePane, ScrollbarVisibility } from '@fluentui/react';
 
 export interface IMessagesListProps {
     messages: IChatMessage[];
+    disableMarkdown?: boolean;
 }
 
 export default class MessagesList extends React.Component<IMessagesListProps, {}> {
@@ -27,7 +28,7 @@ export default class MessagesList extends React.Component<IMessagesListProps, {}
             if (m.role === 'user') {
                 return <UserQuestion key={i} message={m.text} />
             }
-            return <AssistantResponse key={i} message={m.text} />
+            return <AssistantResponse key={i} message={m.text} disableMarkdown={this.props.disableMarkdown} />
         });
 
         return (

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

@@ -7,6 +7,8 @@ export interface IUserMessageProps {
     sendQuery: () => Promise<void>;
     controller: AbortController;
     textFieldValue: string;
+    disableMarkdown?: boolean;
+    toggleMarkdown: () => void;
 }
 
 export default class UserMessage extends React.Component<IUserMessageProps, {}> {
@@ -37,6 +39,7 @@ export default class UserMessage extends React.Component<IUserMessageProps, {}>
           <TextField
             multiline
             autoAdjustHeight
+            rows={5}
             value={this.props.textFieldValue}
             onChange={this._onChange}
             onKeyDown={this._keyDownHandler}
@@ -56,6 +59,13 @@ export default class UserMessage extends React.Component<IUserMessageProps, {}>
             ariaLabel="Stop"
             onClick={() => this.props.controller.abort()}
           />
+          <IconButton
+            toggle
+            checked={!this.props.disableMarkdown}
+            onClick={this.props.toggleMarkdown}
+            title="Toggle Markdown"
+            ariaLabel="Markdown"
+            iconProps={{iconName:'MarkDownLanguage'}}/>
         </Stack>
       </Stack>
     );