Skip to content

Vue chat TextContent claims markdown support but renders markdown literally #728

Description

@vishxrad

Summary

The Vue chat example tells the model that TextContent supports markdown, but the local Vue renderer displays markdown markers literally.

Observed while running PR #629 locally, but this appears to be an example/component-library mismatch rather than part of the PR's packages/vue-lang query/mutation scope.

Repro

  1. Run examples/vue-chat.
  2. Ask for a response likely to include formatted text, for example stock information.
  3. The assistant response renders literal markdown such as **NVDA** and **$877.33** instead of bold text.

Expected

Markdown inside TextContent("...") should render as formatted text, or the Vue chat prompt/library should not claim markdown support.

Actual

Markdown is shown literally.

Relevant code

  • examples/vue-chat/lib/library.ts describes TextContent as: "Displays a block of text. Supports markdown formatting within the string."
  • examples/vue-chat/lib/library.ts also instructs: "Use TextContent for all text output. You can use markdown within the text string."
  • examples/vue-chat/components/openui/TextContent.vue renders the text using plain Vue interpolation: {{ props.text ?? "" }}, which escapes and displays markdown syntax literally.

Likely fix options

  • Add a markdown renderer to the Vue chat TextContent.vue implementation, with sanitization appropriate for rendered HTML.
  • Or update the Vue chat prompt/library description so it does not instruct the model to emit markdown in TextContent.

Notes

@openuidev/vue-lang appears to be the runtime/bindings layer (Renderer, defineComponent, createLibrary, composables). The Vue chat component library is local to the example. The richer prebuilt markdown component exists on the React side as @openuidev/react-ui's MarkDownRenderer, but there is no equivalent Vue UI package in this example.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions