feat: support rich text formatting in iMessage kit#43
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📜 Recent review details🧰 Additional context used📓 Path-based instructions (4)**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Files:
**/*.{html,ts,tsx,css}📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Files:
**/*.{html,ts,tsx,js,jsx}📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Files:
**/*.ts📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Files:
🧬 Code graph analysis (2)modules/chat.ts (1)
lib/auto-create-chat.ts (1)
🔇 Additional comments (5)
📝 WalkthroughWalkthroughAdds per-range text styling, per-message text animations, and a Changes
Sequence Diagram(s)sequenceDiagram
participant Client
participant SDK
participant Server
Client->>SDK: sendMessage(options: { message, bubbleEffect?, textStyles?, textAnimation? })
SDK->>SDK: validate & map options (bubbleEffect, textStyles, textAnimation)
SDK->>Server: POST /api/v1/chat/new (or /message/send) with payload
Server-->>SDK: 201 Created + Message/Chat response
SDK-->>Client: callback/resolve with message GUID
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
Comment |
There was a problem hiding this comment.
Pull request overview
This PR replaces the raw effectId string approach for iMessage effects with a typed BubbleEffect union type, and adds support for rich text formatting (textStyles) and character animations (textAnimation). It also introduces a SendIMessageAppOptions type and a new TextStyle interface.
Changes:
- Replaces
effectId: stringwith typedbubbleEffect: BubbleEffect,textStyles: TextStyle[], andtextAnimation: TextAnimationin the send message API - Adds new type definitions (
TextStyle,TextAnimation,BubbleEffect,SendIMessageAppOptions) and updates modules/examples to use the new API - Adds documentation and a new example file (
message-styled.ts) demonstrating text styles, animations, and bubble effects
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| types/message.ts | Adds TextStyle, TextAnimation, BubbleEffect, SendIMessageAppOptions types; replaces effectId with new properties in SendMessageOptions |
| modules/message.ts | Updates fallback createChatWithMessage call to use bubbleEffect instead of effectId |
| modules/chat.ts | Renames effectId to bubbleEffect in createChat options |
| lib/auto-create-chat.ts | Renames effectId to bubbleEffect in createChatWithMessage |
| examples/message-effects.ts | Refactors to use BubbleEffect type and loop instead of repetitive per-effect code |
| examples/message-styled.ts | New example demonstrating text styles, animations, and bubble effects |
| README.md | Adds documentation for text styles & animations; updates example table |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
modules/message.ts (1)
28-36:⚠️ Potential issue | 🟠 MajorForward the new rich-text fields through the auto-create path.
When
sendMessage()falls back tocreateChatWithMessage()for a brand-new chat, this call only preservessubjectandbubbleEffect.textStylesandtextAnimationare dropped, so first-message sends silently lose the new formatting behavior.💡 Proposed fix
await createChatWithMessage({ http: this.http, address, message: options.message, tempGuid, subject: options.subject, + textStyles: options.textStyles, + textAnimation: options.textAnimation, bubbleEffect: options.bubbleEffect, service, });
createChatWithMessage()inlib/auto-create-chat.tsneeds matching fields in its options and POST body, or this path should create the chat and retry the original message payload.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@modules/message.ts` around lines 28 - 36, When falling back from sendMessage() to createChatWithMessage() the new rich-text fields textStyles and textAnimation are not forwarded, so update the createChatWithMessage call and its implementation to accept these fields (e.g. add textStyles and textAnimation to the options param in createChatWithMessage) and ensure they are included in the POST/body sent by the function in lib/auto-create-chat.ts; alternatively implement createChatWithMessage to only create the chat and then retry the original sendMessage payload so the original message’s textStyles/textAnimation are preserved (refer to sendMessage, createChatWithMessage, and the options object to locate update points).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@examples/message-styled.ts`:
- Around line 3-10: The code currently defaults CHAT_GUID to a real-looking
recipient; change it so CHAT_GUID is required: remove the fallback in the
CHAT_GUID constant and add a fail-fast check (e.g., in the top-level or at the
start of main()) that throws an Error or calls process.exit with a clear message
if process.env.CHAT_GUID is undefined/empty; reference the CHAT_GUID constant
and the main() function (and where createSDK() is invoked) so the example stops
execution instead of sending to a default recipient.
- Around line 48-55: The textStyles ranges are off: adjust them to use exclusive
end indices and correct start positions so "italic there" includes the final 'e'
and "underline" does not include the leading space; update the textStyles array
in the multiStyleMsg sendMessage call (the entry for italic should use end 23
instead of 22, and the underline range should start at 25 instead of 24) while
keeping the bold range as-is.
In `@README.md`:
- Around line 225-232: The example call to sdk.messages.sendMessage still uses
the old effectId field; update the example to use the renamed SendMessageOptions
property bubbleEffect instead (e.g., replace effectId with bubbleEffect) so the
sample matches the current SendMessageOptions API and consumers who copy the
snippet won’t get a type or runtime mismatch when calling
sdk.messages.sendMessage.
In `@types/message.ts`:
- Around line 14-22: The TextAnimation union type block (export type
TextAnimation) is misformatted and failing CI; run the project's formatter
(e.g., prettier/tsfmt) against types/message.ts or your entire repo to reformat
the union block so it matches the repository style, then stage the updated file
and re-run tests—ensure the export type TextAnimation union lines are adjusted
by the formatter rather than manual style changes.
---
Outside diff comments:
In `@modules/message.ts`:
- Around line 28-36: When falling back from sendMessage() to
createChatWithMessage() the new rich-text fields textStyles and textAnimation
are not forwarded, so update the createChatWithMessage call and its
implementation to accept these fields (e.g. add textStyles and textAnimation to
the options param in createChatWithMessage) and ensure they are included in the
POST/body sent by the function in lib/auto-create-chat.ts; alternatively
implement createChatWithMessage to only create the chat and then retry the
original sendMessage payload so the original message’s textStyles/textAnimation
are preserved (refer to sendMessage, createChatWithMessage, and the options
object to locate update points).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 79656591-525d-40bf-a34c-8e0e68410c7b
📒 Files selected for processing (7)
README.mdexamples/message-effects.tsexamples/message-styled.tslib/auto-create-chat.tsmodules/chat.tsmodules/message.tstypes/message.ts
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Agent
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
**/*.{ts,tsx,js,jsx}: Usebun <file>instead ofnode <file>orts-node <file>for running TypeScript and JavaScript files
Bun automatically loads .env, so don't use dotenv library
UseBun.serve()with WebSockets, HTTPS, and routes instead ofexpress
Usebun:sqlitefor SQLite database operations instead ofbetter-sqlite3
UseBun.redisfor Redis operations instead ofioredis
UseBun.sqlfor Postgres database operations instead ofpgorpostgres.js
Use built-inWebSocketinstead ofwslibrary
PreferBun.fileovernode:fs's readFile/writeFile for file operations
UseBun.$template tag for shell commands instead of execa library
CSS files can be imported directly in TypeScript/JavaScript/JSX files and will be bundled automatically by Bun
Files:
modules/chat.tstypes/message.tsmodules/message.tsexamples/message-effects.tsexamples/message-styled.tslib/auto-create-chat.ts
**/*.{html,ts,tsx,css}
📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use
bun build <file.html|file.ts|file.css>instead ofwebpackoresbuildfor bundling
Files:
modules/chat.tstypes/message.tsmodules/message.tsexamples/message-effects.tsexamples/message-styled.tslib/auto-create-chat.ts
**/*.{html,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use HTML imports with
Bun.serve()for frontend instead ofvite
Files:
modules/chat.tstypes/message.tsmodules/message.tsexamples/message-effects.tsexamples/message-styled.tslib/auto-create-chat.ts
**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Run TypeScript server files with
bun --hot <file.ts>for hot module reloading during development
Files:
modules/chat.tstypes/message.tsmodules/message.tsexamples/message-effects.tsexamples/message-styled.tslib/auto-create-chat.ts
🧬 Code graph analysis (2)
examples/message-effects.ts (2)
types/message.ts (1)
BubbleEffect(24-37)examples/utils.ts (2)
createSDK(4-11)handleError(24-31)
examples/message-styled.ts (2)
examples/utils.ts (2)
createSDK(4-11)handleError(24-31)lib/Logger.ts (1)
error(84-90)
🪛 GitHub Actions: CI
types/message.ts
[error] 14-22: Formatter would have printed different content. Code formatting does not match style guide.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@examples/message-effects.ts`:
- Line 4: The code defaults CHAT_GUID to a fake recipient which can send
messages to unintended numbers; remove the unsafe default and add a fail-fast
guard at the start of main() to throw an error if CHAT_GUID is not set.
Specifically, stop using the fallback in the CHAT_GUID constant and update
main() to check if CHAT_GUID is falsy and throw new Error("Set CHAT_GUID
environment variable before running this example") before proceeding to
createSDK() or any send logic (referencing the CHAT_GUID constant and main()
function).
In `@lib/auto-create-chat.ts`:
- Around line 1-2: Reorder the imports in lib/auto-create-chat.ts to satisfy the
linter: place external package imports (AxiosInstance from "axios") before
internal/project imports (TextStyle, TextAnimation from "../types") and sort
multiple imports alphabetically; you can run bunx biome check --write to apply
the project's Biome import ordering automatically.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e21cff23-dd50-49d9-9f3c-34dd03458c1d
📒 Files selected for processing (4)
examples/message-effects.tsexamples/message-styled.tslib/auto-create-chat.tsmodules/message.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- modules/message.ts
📜 Review details
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
**/*.{ts,tsx,js,jsx}: Usebun <file>instead ofnode <file>orts-node <file>for running TypeScript and JavaScript files
Bun automatically loads .env, so don't use dotenv library
UseBun.serve()with WebSockets, HTTPS, and routes instead ofexpress
Usebun:sqlitefor SQLite database operations instead ofbetter-sqlite3
UseBun.redisfor Redis operations instead ofioredis
UseBun.sqlfor Postgres database operations instead ofpgorpostgres.js
Use built-inWebSocketinstead ofwslibrary
PreferBun.fileovernode:fs's readFile/writeFile for file operations
UseBun.$template tag for shell commands instead of execa library
CSS files can be imported directly in TypeScript/JavaScript/JSX files and will be bundled automatically by Bun
Files:
lib/auto-create-chat.tsexamples/message-effects.tsexamples/message-styled.ts
**/*.{html,ts,tsx,css}
📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use
bun build <file.html|file.ts|file.css>instead ofwebpackoresbuildfor bundling
Files:
lib/auto-create-chat.tsexamples/message-effects.tsexamples/message-styled.ts
**/*.{html,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use HTML imports with
Bun.serve()for frontend instead ofvite
Files:
lib/auto-create-chat.tsexamples/message-effects.tsexamples/message-styled.ts
**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Run TypeScript server files with
bun --hot <file.ts>for hot module reloading during development
Files:
lib/auto-create-chat.tsexamples/message-effects.tsexamples/message-styled.ts
🧬 Code graph analysis (2)
lib/auto-create-chat.ts (1)
types/message.ts (2)
TextStyle(5-12)TextAnimation(14-22)
examples/message-styled.ts (2)
examples/utils.ts (2)
createSDK(4-11)handleError(24-31)lib/Logger.ts (1)
error(84-90)
🪛 GitHub Actions: CI
lib/auto-create-chat.ts
[error] 1-3: assist/source/organizeImports: The imports and exports are not sorted. Safe fix: Organize Imports (Biome).
🔇 Additional comments (4)
examples/message-styled.ts (2)
3-3: RequireCHAT_GUIDinstead of defaulting to a recipient.The fallback to
"any;-;+1234567890"could accidentally send messages to an unintended number. Executable examples should fail fast whenCHAT_GUIDis not set.🛡️ Proposed fix
-const CHAT_GUID = process.env.CHAT_GUID || "any;-;+1234567890"; +const CHAT_GUID = process.env.CHAT_GUID; function sleep(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); } async function main() { + if (!CHAT_GUID) { + throw new Error("Set CHAT_GUID environment variable before running this example"); + } const sdk = createSDK();
9-131: LGTM!The example clearly demonstrates all three independent layers (textStyles, textAnimation, bubbleEffect) with proper SDK lifecycle management and error handling. The textStyles ranges are now correct.
lib/auto-create-chat.ts (1)
50-72: LGTM!The function signature and payload construction correctly extend support for the new rich text formatting options. The type imports align with the definitions in
types/message.ts.examples/message-effects.ts (1)
6-69: LGTM!The refactored approach using typed arrays (
BUBBLE_EFFECTS) and a record (EFFECT_MESSAGES) is cleaner and more maintainable than individual calls. The loop-based iteration with proper error handling and SDK lifecycle management is well-structured.
There was a problem hiding this comment.
Pull request overview
This PR replaces the raw effectId string approach for iMessage effects with a more structured API using typed enums: BubbleEffect, TextAnimation, and TextStyle. It also adds a new SendIMessageAppOptions interface for future iMessage app integration, updates examples, and adds documentation for the new text formatting capabilities.
Changes:
- Replaced
effectId: stringwith three typed properties:textStyles(per-range formatting),textAnimation(whole-message animations), andbubbleEffect(bubble/screen effects) across types, modules, and helpers - Refactored
message-effects.tsexample to use the newBubbleEffecttype and added a newmessage-styled.tsexample demonstrating text styles and animations - Added documentation section "Text Styles & Animations" to README with usage examples and reference tables
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| types/message.ts | Added TextStyle, TextAnimation, BubbleEffect types; replaced effectId with bubbleEffect; added SendIMessageAppOptions interface |
| modules/message.ts | Updated createChatWithMessage call to pass new properties instead of effectId |
| modules/chat.ts | Renamed effectId to bubbleEffect in createChat method signature |
| lib/auto-create-chat.ts | Updated function signature and body to use bubbleEffect, textStyles, textAnimation |
| examples/message-effects.ts | Refactored to use BubbleEffect type in a loop instead of raw effect ID strings |
| examples/message-styled.ts | New example demonstrating text styles, animations, and combined usage |
| README.md | Added "Text Styles & Animations" documentation section and updated examples table |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@lib/auto-create-chat.ts`:
- Line 56: Replace the loose string type for the bubbleEffect option with the
shared BubbleEffect union to restore compile-time validation: import
BubbleEffect from ../types and change the property declaration bubbleEffect?:
string to bubbleEffect?: BubbleEffect in lib/auto-create-chat.ts; apply the same
change where bubbleEffect is declared/used in modules/chat.ts (around the
existing bubbleEffect usage at the earlier declaration), ensuring the type
aligns with SendMessageOptions in types/message.ts.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: fb9e2ed7-fe6a-4443-9c29-3e38714ed6e2
📒 Files selected for processing (2)
lib/auto-create-chat.tstypes/message.ts
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Agent
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
**/*.{ts,tsx,js,jsx}: Usebun <file>instead ofnode <file>orts-node <file>for running TypeScript and JavaScript files
Bun automatically loads .env, so don't use dotenv library
UseBun.serve()with WebSockets, HTTPS, and routes instead ofexpress
Usebun:sqlitefor SQLite database operations instead ofbetter-sqlite3
UseBun.redisfor Redis operations instead ofioredis
UseBun.sqlfor Postgres database operations instead ofpgorpostgres.js
Use built-inWebSocketinstead ofwslibrary
PreferBun.fileovernode:fs's readFile/writeFile for file operations
UseBun.$template tag for shell commands instead of execa library
CSS files can be imported directly in TypeScript/JavaScript/JSX files and will be bundled automatically by Bun
Files:
types/message.tslib/auto-create-chat.ts
**/*.{html,ts,tsx,css}
📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use
bun build <file.html|file.ts|file.css>instead ofwebpackoresbuildfor bundling
Files:
types/message.tslib/auto-create-chat.ts
**/*.{html,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use HTML imports with
Bun.serve()for frontend instead ofvite
Files:
types/message.tslib/auto-create-chat.ts
**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Run TypeScript server files with
bun --hot <file.ts>for hot module reloading during development
Files:
types/message.tslib/auto-create-chat.ts
🧬 Code graph analysis (1)
lib/auto-create-chat.ts (1)
types/message.ts (2)
TextStyle(5-12)TextAnimation(14-14)
🔇 Additional comments (1)
types/message.ts (1)
39-41: No action required. TheSendMessageOptionsinterface only exposesbubbleEffect; there is noeffectIdproperty to replace or deprecate. The codebase consistently usesbubbleEffectacross all call sites and examples.> Likely an incorrect or invalid review comment.
Summary by CodeRabbit
New Features
Documentation