Fix duplicate chat demo surfaces

.changeset/fix-issue-5-demo-surfaces.md

@@ -0,0 +1,5 @@
+---
+'@link-assistant/react-chat-ui': patch
+---
+
+Remove duplicated chat transcript rendering from the demo gallery and verify each chat profile through its active demo surface.

.github/workflows/chat-demos.yml

@@ -45,7 +45,7 @@ jobs:
         uses: actions/upload-artifact@v7
         with:
           name: chat-demo-screenshot
-          path: docs/screenshots/issue-3-chat-demos.png
+          path: docs/screenshots/issue-5-chat-demos.png
 
       - name: Configure GitHub Pages
         if: github.event_name == 'push' && github.ref == 'refs/heads/main'
@@ -95,5 +95,5 @@ jobs:
       - name: Run browser-commander tests against GitHub Pages
         env:
           CHAT_DEMO_BASE_URL: ${{ needs.deploy.outputs.page_url }}
-          CHAT_DEMO_SCREENSHOT_PATH: docs/screenshots/issue-3-chat-demos-deployed.png
+          CHAT_DEMO_SCREENSHOT_PATH: docs/screenshots/issue-5-chat-demos-deployed.png
         run: npm run test:e2e

.gitkeep

@@ -1 +1,2 @@
-# .gitkeep file auto-generated at 2026-04-14T12:50:58.126Z for PR creation at branch issue-36-780ff21d4079 for issue https://github.com/link-foundation/js-ai-driven-development-pipeline-template/issues/36
+# .gitkeep file auto-generated at 2026-04-14T12:50:58.126Z for PR creation at branch issue-36-780ff21d4079 for issue https://github.com/link-foundation/js-ai-driven-development-pipeline-template/issues/36
+# Updated: 2026-05-12T15:33:00.819Z

docs/case-studies/issue-5/data/issue-5-comments.json

@@ -1 +1,48 @@
-[]
+[
+  {
+    "url": "https://api.github.com/repos/link-assistant/react-chat-ui/issues/comments/4432168514",
+    "html_url": "https://github.com/link-assistant/react-chat-ui/issues/5#issuecomment-4432168514",
+    "issue_url": "https://api.github.com/repos/link-assistant/react-chat-ui/issues/5",
+    "id": 4432168514,
+    "node_id": "IC_kwDOSXiEPM8AAAABCC2GQg",
+    "user": {
+      "login": "konard",
+      "id": 1431904,
+      "node_id": "MDQ6VXNlcjE0MzE5MDQ=",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1431904?v=4",
+      "gravatar_id": "",
+      "url": "https://api.github.com/users/konard",
+      "html_url": "https://github.com/konard",
+      "followers_url": "https://api.github.com/users/konard/followers",
+      "following_url": "https://api.github.com/users/konard/following{/other_user}",
+      "gists_url": "https://api.github.com/users/konard/gists{/gist_id}",
+      "starred_url": "https://api.github.com/users/konard/starred{/owner}{/repo}",
+      "subscriptions_url": "https://api.github.com/users/konard/subscriptions",
+      "organizations_url": "https://api.github.com/users/konard/orgs",
+      "repos_url": "https://api.github.com/users/konard/repos",
+      "events_url": "https://api.github.com/users/konard/events{/privacy}",
+      "received_events_url": "https://api.github.com/users/konard/received_events",
+      "type": "User",
+      "user_view_type": "public",
+      "site_admin": false
+    },
+    "created_at": "2026-05-12T15:32:22Z",
+    "updated_at": "2026-05-12T15:32:22Z",
+    "body": "<img width=\"1824\" height=\"1098\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/9bedd008-ffa3-4965-9c49-8858df678473\" />\n\n<img width=\"1824\" height=\"1098\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fb014c8c-d693-4e7c-aec8-806d290f8844\" />\n\nIt is still visible, that we still duplicate our own chat rendering in all pages, that distracts from actual demos. And most of demos still does not work, I asked to have e2e tests, and looks like these were not done, or they just not working.\n\nPlease double check all my requirements again, and fix all the errors. All demos should be working, we should not have so much white space on the page in the middle, where we have demos, also we now have separate section for our own chat implementation, there is no need to show it on every page duplicating.\n\nAlso I was talking about sorting and so on, nothing of these is done.",
+    "author_association": "MEMBER",
+    "pin": null,
+    "reactions": {
+      "url": "https://api.github.com/repos/link-assistant/react-chat-ui/issues/comments/4432168514/reactions",
+      "total_count": 0,
+      "+1": 0,
+      "-1": 0,
+      "laugh": 0,
+      "hooray": 0,
+      "confused": 0,
+      "heart": 0,
+      "rocket": 0,
+      "eyes": 0
+    },
+    "performed_via_github_app": null
+  }
+]

docs/case-studies/issue-5/data/issue-5.json

@@ -1 +1,132 @@
-{"assignees":[],"author":{"id":"MDQ6VXNlcjE0MzE5MDQ=","is_bot":false,"login":"konard","name":"Konstantin Diachenko"},"body":"See:\n\n<img width=\"1824\" height=\"1106\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6471b0a6-2c97-4180-9a2a-be835758eec3\" />\n\nAt the moment we have multiple implementation of chat in different frameworks/libraries. But with all these differences, we have self implemented chat UI, that duplicates for all of them.\n\nI think we can just move our own implementation to keep it, as separate item in the list to the left.\n\nAnd make sure all other chat libraries demo a covered with e2e tests before shipping (locally in pull request's CI/CD) and after shipping (after GItHub Pages deploy), so we 100% sure it is possible to see message, and 100% sure it is possible to send message, and the message appearance is verified. That should be done for all of them, as I see some of them not working like this:\n\n```\nHosted embed source\nRequires a TalkJS app ID and conversation; the source block shows the real Session and Chatbox import path.\nimport { Chatbox, Session } from '@talkjs/react';\n```\n\n```\nRuntime adapter source\nRequires an assistant-ui runtime adapter; the source block shows the real provider and thread primitives for runtime trials.\nimport { AssistantRuntimeProvider, ThreadPrimitive } from '@assistant-ui/react';\n```\n\n```\nHosted embed source\nRequires a TalkJS app ID and conversation; the source block shows the real Session and Chatbox import path.\nimport { Chatbox, Session } from '@talkjs/react';\n```\n\n```\nHosted UIKit source\nRequires CometChat initialization settings; the shown source uses the published UIKit import path.\nimport { CometChatConversationsWithMessages } from '@cometchat/chat-uikit-react';\n```\n\n```\nHosted UIKit source\nRequires a Sendbird app ID, user ID, and channel URL; the exact React provider source is shown for credentialed trials.\nimport SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';\n```\n\n```\nHosted SDK source\nRequires a Stream app, user token, and channel; the gallery shows the real import source without mocking a hosted session.\nimport { Chat, Channel, MessageList, MessageInput } from 'stream-chat-react';\n```\n\nWe need to make sure we can use React.js chat component separately from any other requirements, and provide all dependencies we need in GitHub Pages environment, if they do conflict we should use micro frontends architecture, so that each demo gets its own page and dependencies, so there is no they they conflict with each other.\n\nWe should also try to use t3 chat component if possible (exported as library). And also expand scope of examples, to use 10-20 more most popular solutions. Also we should add our own chat ui (if it is not react.js - we should reimplement it here as such - from https://github.com/deep-assistant/GPTutor.\n\nIt is important to have ability to support markdown in both messages, and input field (there might be also be multiple different components for input field, also should be explorable and switchable).\n\nWe need to have ability to show or not the avatar, name, replies like in Telegram (if we have access to web version source code and it is react.js we can use it) and so on.\n\nAnyway we should sort all options by how much features they do support, for on top of the page - most feature rich, actively maintained and flexible, configurable components. And on the bottom the lest feature rich, less active and less frexible. Make some scoring out of the data collected.\n\nAnd also we need a page or tab for comparison of all features each framework/library has, limitations, locks in and so on.\n\nWe need to collect data related about the issue to this repository, make sure we compile that data to `./docs/case-studies/issue-{id}` folder, and use it to do deep case study analysis (also make sure to search online for additional facts and data), list of each and all requirements from the issue, and propose possible solutions and solution plans for each requirement (we should also check known existing components/libraries, that solve similar problem or can help in solutions).\n\nPlease plan and execute everything in a single pull request, you have unlimited time and context, as context auto-compacts and you can continue indefinitely, until it is each and every requirement fully addressed, and everything is totally done.","createdAt":"2026-05-11T12:48:20Z","labels":[{"id":"LA_kwDOSXiEPM8AAAACiWN7PQ","name":"bug","description":"Something isn't working","color":"d73a4a"},{"id":"LA_kwDOSXiEPM8AAAACiWN7SA","name":"documentation","description":"Improvements or additions to documentation","color":"0075ca"},{"id":"LA_kwDOSXiEPM8AAAACiWN7Vg","name":"enhancement","description":"New feature or request","color":"a2eeef"}],"number":5,"state":"OPEN","title":"Fixes and improvements","updatedAt":"2026-05-11T12:52:24Z","url":"https://github.com/link-assistant/react-chat-ui/issues/5"}
+{
+  "url": "https://api.github.com/repos/link-assistant/react-chat-ui/issues/5",
+  "repository_url": "https://api.github.com/repos/link-assistant/react-chat-ui",
+  "labels_url": "https://api.github.com/repos/link-assistant/react-chat-ui/issues/5/labels{/name}",
+  "comments_url": "https://api.github.com/repos/link-assistant/react-chat-ui/issues/5/comments",
+  "events_url": "https://api.github.com/repos/link-assistant/react-chat-ui/issues/5/events",
+  "html_url": "https://github.com/link-assistant/react-chat-ui/issues/5",
+  "id": 4420934931,
+  "node_id": "I_kwDOSXiEPM8AAAABB4IdEw",
+  "number": 5,
+  "title": "Fixes and improvements",
+  "user": {
+    "login": "konard",
+    "id": 1431904,
+    "node_id": "MDQ6VXNlcjE0MzE5MDQ=",
+    "avatar_url": "https://avatars.githubusercontent.com/u/1431904?v=4",
+    "gravatar_id": "",
+    "url": "https://api.github.com/users/konard",
+    "html_url": "https://github.com/konard",
+    "followers_url": "https://api.github.com/users/konard/followers",
+    "following_url": "https://api.github.com/users/konard/following{/other_user}",
+    "gists_url": "https://api.github.com/users/konard/gists{/gist_id}",
+    "starred_url": "https://api.github.com/users/konard/starred{/owner}{/repo}",
+    "subscriptions_url": "https://api.github.com/users/konard/subscriptions",
+    "organizations_url": "https://api.github.com/users/konard/orgs",
+    "repos_url": "https://api.github.com/users/konard/repos",
+    "events_url": "https://api.github.com/users/konard/events{/privacy}",
+    "received_events_url": "https://api.github.com/users/konard/received_events",
+    "type": "User",
+    "user_view_type": "public",
+    "site_admin": false
+  },
+  "labels": [
+    {
+      "id": 10894932797,
+      "node_id": "LA_kwDOSXiEPM8AAAACiWN7PQ",
+      "url": "https://api.github.com/repos/link-assistant/react-chat-ui/labels/bug",
+      "name": "bug",
+      "color": "d73a4a",
+      "default": true,
+      "description": "Something isn't working"
+    },
+    {
+      "id": 10894932808,
+      "node_id": "LA_kwDOSXiEPM8AAAACiWN7SA",
+      "url": "https://api.github.com/repos/link-assistant/react-chat-ui/labels/documentation",
+      "name": "documentation",
+      "color": "0075ca",
+      "default": true,
+      "description": "Improvements or additions to documentation"
+    },
+    {
+      "id": 10894932822,
+      "node_id": "LA_kwDOSXiEPM8AAAACiWN7Vg",
+      "url": "https://api.github.com/repos/link-assistant/react-chat-ui/labels/enhancement",
+      "name": "enhancement",
+      "color": "a2eeef",
+      "default": true,
+      "description": "New feature or request"
+    }
+  ],
+  "state": "open",
+  "locked": false,
+  "assignees": [],
+  "milestone": null,
+  "comments": 1,
+  "created_at": "2026-05-11T12:48:20Z",
+  "updated_at": "2026-05-12T15:32:22Z",
+  "closed_at": null,
+  "assignee": null,
+  "author_association": "MEMBER",
+  "type": {
+    "id": 29937029,
+    "node_id": "IT_kwDODp_H0c4ByM2F",
+    "name": "Task",
+    "description": "A specific piece of work",
+    "color": "yellow",
+    "created_at": "2025-11-21T09:35:16Z",
+    "updated_at": "2025-11-21T09:35:16Z",
+    "is_enabled": true
+  },
+  "active_lock_reason": null,
+  "sub_issues_summary": {
+    "total": 0,
+    "completed": 0,
+    "percent_completed": 0
+  },
+  "issue_dependencies_summary": {
+    "blocked_by": 0,
+    "total_blocked_by": 0,
+    "blocking": 0,
+    "total_blocking": 0
+  },
+  "body": "See:\n\n<img width=\"1824\" height=\"1106\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6471b0a6-2c97-4180-9a2a-be835758eec3\" />\n\nAt the moment we have multiple implementation of chat in different frameworks/libraries. But with all these differences, we have self implemented chat UI, that duplicates for all of them.\n\nI think we can just move our own implementation to keep it, as separate item in the list to the left.\n\nAnd make sure all other chat libraries demo a covered with e2e tests before shipping (locally in pull request's CI/CD) and after shipping (after GItHub Pages deploy), so we 100% sure it is possible to see message, and 100% sure it is possible to send message, and the message appearance is verified. That should be done for all of them, as I see some of them not working like this:\n\n```\nHosted embed source\nRequires a TalkJS app ID and conversation; the source block shows the real Session and Chatbox import path.\nimport { Chatbox, Session } from '@talkjs/react';\n```\n\n```\nRuntime adapter source\nRequires an assistant-ui runtime adapter; the source block shows the real provider and thread primitives for runtime trials.\nimport { AssistantRuntimeProvider, ThreadPrimitive } from '@assistant-ui/react';\n```\n\n```\nHosted embed source\nRequires a TalkJS app ID and conversation; the source block shows the real Session and Chatbox import path.\nimport { Chatbox, Session } from '@talkjs/react';\n```\n\n```\nHosted UIKit source\nRequires CometChat initialization settings; the shown source uses the published UIKit import path.\nimport { CometChatConversationsWithMessages } from '@cometchat/chat-uikit-react';\n```\n\n```\nHosted UIKit source\nRequires a Sendbird app ID, user ID, and channel URL; the exact React provider source is shown for credentialed trials.\nimport SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';\n```\n\n```\nHosted SDK source\nRequires a Stream app, user token, and channel; the gallery shows the real import source without mocking a hosted session.\nimport { Chat, Channel, MessageList, MessageInput } from 'stream-chat-react';\n```\n\nWe need to make sure we can use React.js chat component separately from any other requirements, and provide all dependencies we need in GitHub Pages environment, if they do conflict we should use micro frontends architecture, so that each demo gets its own page and dependencies, so there is no they they conflict with each other.\n\nWe should also try to use t3 chat component if possible (exported as library). And also expand scope of examples, to use 10-20 more most popular solutions. Also we should add our own chat ui (if it is not react.js - we should reimplement it here as such - from https://github.com/deep-assistant/GPTutor.\n\nIt is important to have ability to support markdown in both messages, and input field (there might be also be multiple different components for input field, also should be explorable and switchable).\n\nWe need to have ability to show or not the avatar, name, replies like in Telegram (if we have access to web version source code and it is react.js we can use it) and so on.\n\nAnyway we should sort all options by how much features they do support, for on top of the page - most feature rich, actively maintained and flexible, configurable components. And on the bottom the lest feature rich, less active and less frexible. Make some scoring out of the data collected.\n\nAnd also we need a page or tab for comparison of all features each framework/library has, limitations, locks in and so on.\n\nWe need to collect data related about the issue to this repository, make sure we compile that data to `./docs/case-studies/issue-{id}` folder, and use it to do deep case study analysis (also make sure to search online for additional facts and data), list of each and all requirements from the issue, and propose possible solutions and solution plans for each requirement (we should also check known existing components/libraries, that solve similar problem or can help in solutions).\n\nPlease plan and execute everything in a single pull request, you have unlimited time and context, as context auto-compacts and you can continue indefinitely, until it is each and every requirement fully addressed, and everything is totally done.",
+  "closed_by": {
+    "login": "konard",
+    "id": 1431904,
+    "node_id": "MDQ6VXNlcjE0MzE5MDQ=",
+    "avatar_url": "https://avatars.githubusercontent.com/u/1431904?v=4",
+    "gravatar_id": "",
+    "url": "https://api.github.com/users/konard",
+    "html_url": "https://github.com/konard",
+    "followers_url": "https://api.github.com/users/konard/followers",
+    "following_url": "https://api.github.com/users/konard/following{/other_user}",
+    "gists_url": "https://api.github.com/users/konard/gists{/gist_id}",
+    "starred_url": "https://api.github.com/users/konard/starred{/owner}{/repo}",
+    "subscriptions_url": "https://api.github.com/users/konard/subscriptions",
+    "organizations_url": "https://api.github.com/users/konard/orgs",
+    "repos_url": "https://api.github.com/users/konard/repos",
+    "events_url": "https://api.github.com/users/konard/events{/privacy}",
+    "received_events_url": "https://api.github.com/users/konard/received_events",
+    "type": "User",
+    "user_view_type": "public",
+    "site_admin": false
+  },
+  "reactions": {
+    "url": "https://api.github.com/repos/link-assistant/react-chat-ui/issues/5/reactions",
+    "total_count": 0,
+    "+1": 0,
+    "-1": 0,
+    "laugh": 0,
+    "hooray": 0,
+    "confused": 0,
+    "heart": 0,
+    "rocket": 0,
+    "eyes": 0
+  },
+  "timeline_url": "https://api.github.com/repos/link-assistant/react-chat-ui/issues/5/timeline",
+  "performed_via_github_app": null,
+  "state_reason": "reopened",
+  "pinned_comment": null
+}

docs/case-studies/issue-5/data/pr-7.json

@@ -0,0 +1,20 @@
+{
+  "author": {
+    "id": "MDQ6VXNlcjE0MzE5MDQ=",
+    "is_bot": false,
+    "login": "konard",
+    "name": "Konstantin Diachenko"
+  },
+  "baseRefName": "main",
+  "body": "Fixes #5.\n\n## Summary\n\n- Removed the duplicated custom transcript from the gallery and isolated profile pages; each profile now renders one active `DemoSurface`.\n- Added shared real/adapter demo surfaces so every profile verifies visible fixture messages and sent messages in the selected surface.\n- Split the nav into the pinned own component and ranked external libraries with score chips, and corrected scoring so only actual live local renderers get the live bonus.\n- Refreshed the issue-5 case-study data, saved the reported screenshots, and added the final review screenshot.\n\n## Verification\n\n- `npm test`\n- `npm run demo:build`\n- `npm run test:e2e`\n- `npm run check`\n- Playwright MCP manual check: assistant-ui external profile reported one `demo-surface`, zero `.own-chat-frame` nodes, and `runtime-gated` renderer.\n\n## Screenshot\n\n![Issue 5 chat demos](https://github.com/link-assistant/react-chat-ui/blob/issue-5-e1b0937faaf7/docs/screenshots/issue-5-chat-demos.png?raw=true)\n",
+  "createdAt": "2026-05-12T15:33:08Z",
+  "headRefName": "issue-5-e1b0937faaf7",
+  "isDraft": false,
+  "mergeStateStatus": "UNSTABLE",
+  "number": 7,
+  "reviewDecision": "",
+  "state": "OPEN",
+  "title": "Fix duplicate chat demo surfaces",
+  "updatedAt": "2026-05-12T16:27:03Z",
+  "url": "https://github.com/link-assistant/react-chat-ui/pull/7"
+}