Skip to content

feat: add chat app example#7518

Open
janechu wants to merge 9 commits into
mainfrom
users/janechu/create-chat-app-example
Open

feat: add chat app example#7518
janechu wants to merge 9 commits into
mainfrom
users/janechu/create-chat-app-example

Conversation

@janechu
Copy link
Copy Markdown
Collaborator

@janechu janechu commented May 14, 2026 •
edited
Loading

Pull Request

📖 Description

  • add a new examples/chat-app workspace that mirrors the todo-app example shape while using declarative FAST templates
  • pre-render the example shell with @microsoft/fast-build from entry.html, state.json, and templates.html
  • demonstrate iframe + document.write() streaming for canned assistant replies, including new chat-message, chat-card, and chat-suggestion custom elements
  • document the example in README.md and DESIGN.md

👩‍💻 Reviewer Notes

  • The easiest smoke test is to run the example, send Hi, and watch the assistant reply stream in chunk-by-chunk.
  • index.html is generated from the declarative sources by build-markup.mjs; if the shell changes, regenerate it with npm run build -w @microsoft/fast-chat-app-example.

📑 Test Plan

  • npm run build
  • npm run build -w @microsoft/fast-chat-app-example
  • npm run test -w @microsoft/fast-chat-app-example
  • manual smoke test of the built example with Playwright against a local static server (Hi → streamed reply + How are you? suggestion)
  • npm run test currently hits unrelated existing Playwright failures in packages/fast-element/src/components/hydration.pw.spec.ts (Firefox) and packages/fast-element/src/platform.pw.spec.ts (WebKit)

✅ Checklist

General

  • I have included a change request file using $ npm run change
  • I have added tests for my changes.
  • I have tested my changes.
  • I have updated the project documentation to reflect my changes.
  • I have read the CONTRIBUTING documentation and followed the standards for this project.

@janechu janechu mentioned this pull request May 21, 2026
Closed
5 tasks
janechu and others added 6 commits May 21, 2026 12:31
@janechu
feat: add chat app example
efa8d08 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@janechu
chore: remove unused custom-elements-lsp dev dependencies from chat-app
d045fc1 
These editor-only TypeScript LSP plugins were inherited from the
todo-app template but are not required for chat-app to build or run.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@janechu
chore: slow streaming chunk delay to 600ms in chat-app
0870a3d 
Makes the iframe + document.write streaming visibly progressive
during manual smoke tests.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@janechu
remove not defined custom elements style
8e2b619
@janechu
refactor: extract chat-app CSS into a single render-blocking stylesheet
8f1829c 
- Merge every component's <style> block into public/styles.css.
- Scope each component's rules with :host(<tag>) so the same file can be
  loaded into multiple shadow roots without cross-component bleed.
- Link the file from <head> in entry.html (render-blocking, so it loads
  before the rest of the HTML is processed) and from inside every
  declarative shadow DOM template in templates.html.
- Update DESIGN.md to describe the new structure.

The browser fetches the file once; each shadow root applies the cached
stylesheet. Built output (www/index.html) shrinks ~70% (17.6 -> 5.5 kB)
and the CSS is now cacheable across page loads.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@janechu
refactor(examples): move chat-app to examples/ssr/ and adopt design t…
9883a20 
…okens

- Move examples/chat-app/ → examples/ssr/chat-app/ to group it alongside
  other server-side-rendered examples.
- Consume @microsoft/fast-examples-design-system via tokens.css; replace
  every hard-coded color, font size, line height, spacing, corner, stroke,
  shadow, duration, and curve in public/styles.css with var(--fast-...).
  Import tokens.css from src/main.ts and add the design-system.d.ts shim
  for the side-effect CSS import.
- Hard-code the dark theme via <html data-theme="dark"> in entry.html;
  no runtime theme switching.
- Gitignore the build-generated index.html.
- Update root workspaces config (examples/ssr/*), workspace-level README.md
  and DESIGN.md, and .github/copilot-instructions to reference the new
  ssr/ location.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@janechu janechu force-pushed the users/janechu/create-chat-app-example branch from 743b249 to 9883a20 Compare May 21, 2026 19:33
@janechu janechu changed the base branch from releases/fast-element-v3 to main May 21, 2026 19:33
@janechu janechu force-pushed the users/janechu/create-chat-app-example branch from 9883a20 to 517ee26 Compare May 21, 2026 20:02
@janechu janechu changed the base branch from main to releases/fast-element-v3 May 21, 2026 20:02
refactor(chat-app): port to fast-element v2 + fast-html SSR
1efb264 
The chat-app's runtime is updated to use the workspace versions of
`@microsoft/fast-element` and `@microsoft/fast-html` shipped on main
instead of pinning to the v3 release-candidate from npm:

- Components extend `RenderableFASTElement(FASTElement)` from
  `@microsoft/fast-html` and use the v2 `attr` decorator from
  `@microsoft/fast-element`. No more subpath imports
  (`fast-element/declarative.js`, `fast-element/hydration.js`, etc.)
  or per-element `declarativeTemplate()` definitions.
- `src/main.ts` triggers hydration by registering `<f-template>` via
  `TemplateElement.options(...).define(...)` with `observerMap: 'all'`
  for each component, matching the pattern used by the webui-todo-app
  example.
- `<f-template>` definitions in `templates.html` and the
  `@microsoft/fast-build` pipeline (build-markup.mjs + fast-build.config.json)
  are unchanged — they already speak the v2 marker format.
- `package.json` switches every workspace `@microsoft/*` dependency to
  `*` so the chat-app always resolves to the in-repo packages on whichever
  branch it sits on, never to a pinned npm version.
- README and DESIGN updates to describe the v2 hydration path.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@janechu janechu force-pushed the users/janechu/create-chat-app-example branch from 517ee26 to 1efb264 Compare May 21, 2026 20:45
@janechu janechu changed the base branch from releases/fast-element-v3 to main May 21, 2026 20:45
janechu and others added 2 commits May 21, 2026 14:39
@janechu
fix(chat-app): define custom elements and align bindings for hydration
929358d 
Three issues prevented the chat-app from hydrating correctly:

1. The chat-* components were never registered with customElements.
   Calling defineAsync on each component (chat-app, chat-card,
   chat-message, chat-suggestion) registers them so the SSR markers
   in templates.html have something to hydrate against.

2. With target: ES2022, TypeScript emits class fields as
   Object.defineProperty calls, which create own properties on the
   instance that shadow the prototype getter/setter installed by
   @attr. Setting useDefineForClassFields: false in tsconfig.json
   makes TypeScript emit fields as constructor assignments, which
   correctly go through the @attr setter and keep bindings reactive.

3. fast-html's template parser does not trim whitespace inside
   {{ ... }} expressions. Bindings like '{{ welcomeTitle }}' became
   the property name ' welcomeTitle ' (with surrounding spaces) and
   silently evaluated to undefined, blanking the SSR text. Bindings
   are now written without inner whitespace and a local biome.json
   disables the HTML formatter for this app so biome cannot
   reintroduce the spaces.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@janechu
fix(chat-app): preserve cross-platform optional deps in lockfile
f0935f6 
The previous package-lock.json was regenerated on macOS arm64 and
stripped the optional platform binaries for @ast-grep/cli (linux,
windows, etc.). Azure Pipelines CI runs on Linux and could not
install @ast-grep/cli-linux-x64-gnu, so the @ast-grep/cli postinstall
script failed with 'Failed to move @ast-grep/cli binary into place.'.

Regenerate the lockfile from main with all 7 platform entries
preserved so 'npm ci' resolves the correct binary on every CI host.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@janechu janechu marked this pull request as ready for review May 21, 2026 22:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@chrisdholt chrisdholt Awaiting requested review from chrisdholt chrisdholt is a code owner

@radium-v radium-v Awaiting requested review from radium-v radium-v is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@janechu