Add roleplay composer with quick-reply suggestions and action chips#132
Merged
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2a33f9c380
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Deploying zodiac with
|
| Latest commit: |
a5ccf32
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0b0b7d2d.zodiac-c9y.pages.dev |
| Branch Preview URL: | https://codex-address-issue--129-on.zodiac-c9y.pages.dev |
…s; enhance error handling for missing DOM elements; streamline settings loading and saving logic.
…eamline roleplay actions handling tests: rendering four suggestion buttons using the roleplay suggestion model refreshes with the newly selected suggestion model sends the selected dialogue option through the final message request includes queued actions before the selected dialogue option in the final request
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a new roleplay composer flow to the chat input so roleplay-enabled personas can generate quick reply suggestions, queue scene/action chips, and send formatted roleplay payloads using the app’s delimiter settings. It also introduces supporting settings, storage keys, adaptive surface infrastructure, styling, and automated coverage around the new composer behavior.
Changes:
- Add the roleplay composer UI, send-flow integration, quick-reply suggestion generation, custom/favorite action persistence, and adaptive-sheet support.
- Add a configurable “roleplay suggestion model” setting plus new syncable local-storage keys and roleplay formatting helpers.
- Add unit, integration, and E2E coverage for model filtering, composer workflows, and mobile adaptive-sheet behavior.
Reviewed changes
Copilot reviewed 31 out of 32 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/unit/models.test.ts | Verifies the subset of models exposed for roleplay suggestions. |
| tests/integration/messages/roleplay-composer.test.ts | Covers suggestion generation, delimiter prompts, sending, and custom action/category persistence. |
| tests/integration/messages/roleplay-composer-model-dropdown.test.ts | Checks dropdown population for roleplay suggestion models. |
| tests/e2e/messages/roleplay-composer.spec.ts | Exercises composer toggling and mobile adaptive-sheet drag-close behavior. |
| src/types/database.types.ts | Refreshes generated database type header metadata. |
| src/types/PremiumEndpoint.ts | Extends premium request settings with a generation-purpose discriminator. |
| src/types/Models.ts | Marks specific models as roleplay-suggestion-capable and adds helper selectors/validators. |
| src/styles/themes/red-light.css | Adjusts modal background color token for red light theme. |
| src/styles/themes/red-dark.css | Adjusts modal background color token for red dark theme. |
| src/styles/themes/purple-light.css | Adjusts modal background color token for purple light theme. |
| src/styles/themes/purple-dark.css | Adjusts modal background color token for purple dark theme. |
| src/styles/themes/monochrome-light.css | Adjusts modal background color token for monochrome light theme. |
| src/styles/themes/monochrome-dark.css | Adjusts modal background color token for monochrome dark theme. |
| src/styles/themes/green-light.css | Adjusts modal background color token for green light theme. |
| src/styles/themes/green-dark.css | Adjusts modal background color token for green dark theme. |
| src/styles/themes/blue-light.css | Adjusts modal background color token for blue light theme. |
| src/styles/themes/blue-dark.css | Adjusts modal background color token for blue dark theme. |
| src/styles/main.css | Adds surface/adaptive-sheet primitives and roleplay composer styling. |
| src/styles/light.css | Sets neutral light modal background token. |
| src/styles/dark.css | Sets neutral dark modal background token. |
| src/services/Surface.service.ts | Introduces transient surface management for adaptive sheets/modals. |
| src/services/Settings.service.ts | Adds roleplay suggestion model persistence and roleplay formatting helpers. |
| src/services/Onboarding.service.ts | Minor import formatting cleanup. |
| src/services/Message.service.ts | Tags premium chat-title generation requests with a purpose flag. |
| src/index.html | Adds settings/select markup, composer DOM, adaptive-sheet modal host, and updates changelog copy. |
| src/constants/SettingsStorageKeys.ts | Adds storage keys and syncable entries for roleplay preferences/actions. |
| src/components/static/RoleplayComposer.component.ts | Implements the composer UI, suggestion requests, custom actions, storage, and send handling. |
| src/components/static/ChatInput.component.ts | Delegates send clicks to the roleplay composer when active. |
| src/components/static/AdaptiveSheet.component.ts | Adds drag-to-close behavior for adaptive-sheet surfaces. |
| src/components/dynamic/HistoryImagePreview.ts | Minor import formatting cleanup. |
| AGENTS.md | Documents overlay vs. surface-layer conventions for the codebase. |
| .github/workflows/merge-gate.yml | Updates CI action versions for checkout and Node setup. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
Description
src/components/static/RoleplayComposer.component.ts) inside the chat input with Dialogue / Actions / Custom tabs, refresh/suggestions, preset/custom action chips, favorites, and queued-action chaining; wire it to the send flow so the main send button delegates to the composer when active.OpenRouter/GoogleGenAIhelpers.src/constants/SettingsStorageKeys.ts,src/services/Settings.service.ts).Roleplay suggestion modelselector in Chat Settings (src/index.html+Settings.service.ts) and include the new key in syncable settings.btn-sendto fireroleplay-send-requestedwhen the composer is active (src/components/static/ChatInput.component.ts), and add styles for the composer and chips (src/styles/main.css).Testing
npm run build, which completed successfully (TypeScript checks and Vite build finished and produced the production bundle).tsc --noEmit) as part of the build and resolved issues found during development, and verified the app bundle was produced by Vite (build warnings about large chunks only).Codex Task