Add support for markdown display (#537)

ts/packages/agentSdk/src/display.ts

@@ -8,7 +8,7 @@
 // - text can supports use ANSI escape code to control additional text color and style
 //   - depending on host support, host is expected to strip ANI escape code if not supported.
 // - html and iframe might not be supported by all hosts.
-export type DisplayType = "html" | "iframe" | "text";
+export type DisplayType = "markdown" | "html" | "iframe" | "text";
 
 export type DynamicDisplay = {
     content: DisplayContent;

ts/packages/dispatcher/src/context/system/handlers/displayCommandHandler.ts

@@ -13,6 +13,14 @@ export class DisplayCommandHandler implements CommandHandler {
                 description: "Speak the display for the host that supports TTS",
                 default: false,
             },
+            type: {
+                description: "Display type",
+                default: "text",
+            },
+            inline: {
+                description: "Display inline",
+                default: false,
+            },
         },
         args: {
             text: {
@@ -27,14 +35,22 @@ export class DisplayCommandHandler implements CommandHandler {
     ) {
         const { flags, args } = params;
 
+        if (
+            flags.type !== "text" &&
+            flags.type !== "html" &&
+            flags.type !== "markdown" &&
+            flags.type !== "iframe"
+        ) {
+            throw new Error(`Invalid display type: ${flags.type}`);
+        }
         for (const content of args.text) {
             context.actionIO.appendDisplay(
                 {
-                    type: "text",
+                    type: flags.type,
                     content,
                     speak: flags.speak,
                 },
-                "block",
+                flags.inline ? "inline" : "block",
             );
         }
     }

ts/packages/shell/package.json

@@ -41,6 +41,7 @@
     "dompurify": "^3.1.6",
     "dotenv": "^16.3.1",
     "electron-updater": "^6.3.2",
+    "markdown-it": "^14.1.0",
     "microsoft-cognitiveservices-speech-sdk": "^1.38.0",
     "typechat": "^0.1.1",
     "ws": "^8.17.1"

ts/packages/shell/src/main/shellSettings.ts

@@ -36,7 +36,7 @@ export class ShellSettings
     public multiModalContent: boolean;
     public devUI: boolean;
     public partialCompletion: boolean;
-    public allowedDisplayType: DisplayType[];
+    public disallowedDisplayType: DisplayType[];
     public onSettingsChanged: EmptyFunction | null;
     public onShowSettingsDialog: ((dialogName: string) => void) | null;
     public onRunDemo: ((interactive: boolean) => void) | null;
@@ -81,7 +81,7 @@ export class ShellSettings
         this.multiModalContent = settings.multiModalContent;
         this.devUI = settings.devUI;
         this.partialCompletion = settings.partialCompletion;
-        this.allowedDisplayType = settings.allowedDisplayType;
+        this.disallowedDisplayType = settings.disallowedDisplayType;
 
         this.onSettingsChanged = null;
         this.onShowSettingsDialog = null;
@@ -178,8 +178,8 @@ export class ShellSettings
     }
 
     public isDisplayTypeAllowed(displayType: DisplayType): boolean {
-        for (let i = 0; i < this.allowedDisplayType.length; i++) {
-            if (this.allowedDisplayType[i] === displayType) {
+        for (let i = 0; i < this.disallowedDisplayType.length; i++) {
+            if (this.disallowedDisplayType[i] === displayType) {
                 return true;
             }
         }

ts/packages/shell/src/main/shellSettingsType.ts

@@ -21,7 +21,7 @@ export type ShellSettingsType = {
     multiModalContent: boolean;
     devUI: boolean;
     partialCompletion: boolean;
-    allowedDisplayType: DisplayType[];
+    disallowedDisplayType: DisplayType[];
 };
 
 export const defaultSettings: ShellSettingsType = {
@@ -35,5 +35,5 @@ export const defaultSettings: ShellSettingsType = {
     multiModalContent: true,
     devUI: false,
     partialCompletion: true,
-    allowedDisplayType: ["html", "iframe", "text"],
+    disallowedDisplayType: [],
 };

ts/packages/shell/src/preload/electronTypes.ts

@@ -37,7 +37,7 @@ export interface ClientSettingsProvider {
     set: SetSettingFunction | null;
 }
 
-export type DisplayType = "html" | "iframe" | "text";
+export type DisplayType = "html" | "iframe" | "text" | "markdown";
 
 export type ClientActions =
     | "show-camera"

ts/packages/shell/src/renderer/src/setContent.ts

@@ -11,6 +11,7 @@ import {
 } from "@typeagent/agent-sdk";
 import DOMPurify from "dompurify";
 import { SettingsView } from "./settingsView";
+import MarkdownIt from "markdown-it";
 
 const ansi_up = new AnsiUp();
 ansi_up.use_classes = true;
@@ -33,16 +34,30 @@ function encodeTextToHtml(text: string): string {
 }
 
 const enableText2Html = true;
-function processContent(content: string, type: string): string {
-    return type === "html"
-        ? DOMPurify.sanitize(content, {
-              ADD_ATTR: ["target", "onclick", "onerror"],
-              ADD_DATA_URI_TAGS: ["img"],
-              ADD_URI_SAFE_ATTR: ["src"],
-          })
-        : enableText2Html
-          ? textToHtml(content)
-          : stripAnsi(encodeTextToHtml(content));
+function processContent(
+    content: string,
+    type: string,
+    inline: boolean = false,
+): string {
+    switch (type) {
+        case "iframe":
+            return content;
+        case "html":
+            return DOMPurify.sanitize(content, {
+                ADD_ATTR: ["target", "onclick", "onerror"],
+                ADD_DATA_URI_TAGS: ["img"],
+                ADD_URI_SAFE_ATTR: ["src"],
+            });
+        case "markdown":
+            const md = new MarkdownIt();
+            return inline ? md.renderInline(content) : md.render(content);
+        case "text":
+            return enableText2Html
+                ? textToHtml(content)
+                : stripAnsi(encodeTextToHtml(content));
+        default:
+            throw new Error(`Invalid content type ${type}`);
+    }
 }
 
 function matchKindStyle(elm: HTMLElement, kindStyle?: string) {
@@ -60,9 +75,10 @@ function matchKindStyle(elm: HTMLElement, kindStyle?: string) {
 function messageContentToHTML(
     message: MessageContent,
     type: DisplayType,
+    inline: boolean,
 ): string {
     if (typeof message === "string") {
-        return processContent(message, type);
+        return processContent(message, type, inline);
     }
 
     if (message.length === 0) {
@@ -71,7 +87,7 @@ function messageContentToHTML(
 
     if (typeof message[0] === "string") {
         return (message as string[])
-            .map((s) => processContent(s, type))
+            .map((s) => processContent(s, type, inline))
             .join("<br>");
     }
 
@@ -149,7 +165,11 @@ export function setContent(
     }
 
     // Process content according to type
-    const contentHtml = messageContentToHTML(message, type);
+    const contentHtml = messageContentToHTML(
+        message,
+        type,
+        appendMode === "inline",
+    );
 
     // if the agent wants to show script we need to do that in isolation so create an iframe
     // and put both the script and supplied HTML into it

ts/packages/shell/src/renderer/src/settingsView.ts

@@ -325,12 +325,8 @@ export class SettingsView {
     }
 
     public isDisplayTypeAllowed(displayType: DisplayType): boolean {
-        for (let i = 0; i < this.shellSettings.allowedDisplayType.length; i++) {
-            if (this.shellSettings.allowedDisplayType[i] === displayType) {
-                return true;
-            }
-        }
-
-        return false;
+        return !this.shellSettings.disallowedDisplayType.some(
+            (type) => type === displayType,
+        );
     }
 }