Fix: [devtools] Respect plain text line breaks (#375)

skip-test-verification
- Update README.md of `tests/ai` to list correct variable names for
Azure OpenAI
- Update devtools to parse `\n` and `\r\n` line breaks as HTML `<br />`

With fix, the following is rendered as shown in image:

```typescript
  const paragraphs = [
    'This is the first paragraph of our test stream. It contains several sentences to demonstrate how streaming works with longer content.<br><br>',
    'Short paragraph\n',
    'Here\'s the second paragraph. Notice how each paragraph is sent as a separate chunk, creating a nice streaming effect for the user.\r\n',
    'This is a third paragraph to show multiple paragraphs streaming in sequence.\n\n',
    'fourth'
  ];
```
<img width="964" height="266" alt="image"
src="https://github.com/user-attachments/assets/ba9c0243-d7bf-4726-b43a-79f9d22771f6"
/>


As reported at microsoft/teams-sdk#2654

---------

Co-authored-by: Corina Gum <>

Author: corinagum

packages/devtools/src/components/HtmlMessageContent/HtmlMessageContent.tsx

@@ -100,7 +100,11 @@ const renderNode = (node: any, key: number = 0): React.ReactNode => {
 
 const HtmlMessageContent = React.memo(function HtmlMessageContent ({ content }: Props)  {
   const classes = useClasses();
-  const dom = parseDocument(content, { });
+
+  // Respect \r\n and \n as line breaks
+  const processedContent = content.replace(/\r?\n/g, '<br />');
+
+  const dom = parseDocument(processedContent, { });
   const body = dom.children || [];
   return <div className={classes.contentContainer} >{body.map((node, i) => renderNode(node, i))}</div>;
 });

tests/ai/README.md

@@ -29,8 +29,8 @@ Then run the sample via ttk.
 
 ```bash
 AZURE_OPENAI_API_KEY=<your_azure_openai_api_key>
-AZURE_OPENAI_API_ENDPOINT=<your_azure_openai_api_endpoint>
-AZURE_OPENAI_MODEL_NAME=<your_azure_openai_model_deployment_name>
+AZURE_OPENAI_ENDPOINT=<your_azure_openai_api_endpoint>
+AZURE_OPENAI_MODEL_DEPLOYMENT_NAME=<your_azure_openai_model_deployment_name>
 AZURE_OPENAI_API_VERSION=<your_azure_openai_api_version>
 
 # Alternatively, set the OpenAI API key: