Skip to content

Sources disclosure is horizontally misaligned in ChatKit UI #190

@SeeknnDestroy

Description

@SeeknnDestroy

Summary

The built-in Sources disclosure/card appears horizontally misaligned with the rest of the ChatKit message layout in the official playground.

Repro

  1. Open https://chatkit.studio/playground
  2. Use the default/light playground UI.
  3. Trigger or open a response with a source citation.
  4. Click the Sources / source pill so the source row/card is shown.

Actual

The expanded source row/card uses a different horizontal inset/width than the assistant message content and composer, so it visually breaks the message column.

Expected

The Sources disclosure/card should align to the same content column as the assistant message body and composer.

Screenshot

From the official ChatKit Studio playground:

ChatKit Sources alignment issue

Notes

  • This repro is from the official playground, not a custom app wrapper.
  • I also saw the same kind of Sources alignment issue when embedding ChatKit via @openai/chatkit-react.
  • I checked this repo and it looks like @openai/chatkit-react mainly mounts the hosted openai-chatkit web component; I could not find the internal Sources renderer source here. If the fix belongs in another public repo/source path, please point me there and I can try a PR.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    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