Experiment/whatsapp action UI mockup #40
Merged
Conversation
This file contains 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
This happened when installing the latest version of the DropdownMenu component
This is the only part of the new system that uses an old comp. I will probably refactor it, but for now it's working OK. I just wanted to add a default message.
It needs to figure out what kind of message it is, and display the content accordingly
This is only for displaying the buttons, not editing them or anything like that. Therefore, it just needs to figure out if the message object has buttons and to display them
This is the place that owns and manages the state of the message thread
This small update brings the message display components into line with WhatsApp messages
Because I ran the autogenerate script this also includes localization for an unrelated "choose your language" localization
Based on the component to edit the action on a message, but underlying data structure is slightly different. This isn't very DRY, but it may be better to keep these components separate. We can revisit this if we fund ourselves having to update them frequently
The UI for editing template tags isn't perfect, because when the drawer slides out you're not able to see the message content. I think eventually editing the text components inline will be a simpler interface, but this is acceptable for now.
- Update imports to be new components - Move most of the logic out to external /actions/*.ts files - Add loading indicators and better error handling - Add more consistent toast messages on success and error
We don't actually want to keep the interactive message parameters when we're converting an interactive message into a type. Before this commit, this function would convert the message type to "text" but also keep all the interactive state, too. This doesn't cause an issue in our editing screens, but would cause 400 errors if sent to the WhatsApp API
kennlebu
approved these changes
Feb 5, 2025
kennlebu
pushed a commit
that referenced
this pull request
Feb 12, 2025
* Added shadcn DropdownMenu component * Added an optional reset callback function for when the upload is deleted * Adding ellipsis to our string clamp function * Updating the page to use new WhatsApp thread composition components * Add some extra AWS addresses to connect-src CSP directive for uploads * Chore: version bump bits-ui This happened when installing the latest version of the DropdownMenu component * Added default text to NewMessage creation This is the only part of the new system that uses an old comp. I will probably refactor it, but for now it's working OK. I just wanted to add a default message. * Simple component for displahying message content It needs to figure out what kind of message it is, and display the content accordingly * Component for displaying message buttons This is only for displaying the buttons, not editing them or anything like that. Therefore, it just needs to figure out if the message object has buttons and to display them * Component that represents a single message * Compnent to represent a list of messages in a thread This is the place that owns and manages the state of the message thread * Main logic functions for WhatsApp message thread composition * Editing frame for WhatsApp message content, using shadcn Drawer comp * Main editing components for editing WhatsApp message content and structure * Components for managing WhatsApp message actions * Update the design of the message display components This small update brings the message display components into line with WhatsApp messages * Update config * Help fix some dev server instability * Localizations for message creation Because I ran the autogenerate script this also includes localization for an unrelated "choose your language" localization * Removed fetchMessages from messages because it's duplicated in threads.ts * Functions to work with message components * Functions to work with message threads * WhatsApp message template selector * Removed old component files * Updated import to refrence new actions files * Updated import to reference new actions files * Added toast messages and loading effect on message save * Version bumped bits-ui * Component to render a template * Component to edit the action on a template Based on the component to edit the action on a message, but underlying data structure is slightly different. This isn't very DRY, but it may be better to keep these components separate. We can revisit this if we fund ourselves having to update them frequently * The drawer component for editing template content The UI for editing template tags isn't perfect, because when the drawer slides out you're not able to see the message content. I think eventually editing the text components inline will be a simpler interface, but this is acceptable for now. * Core component for templates * New version of component to create message * New component to select the type of action for a button * New component for adding actions to a template button * Making the +page.svelte component work for new system - Update imports to be new components - Move most of the logic out to external /actions/*.ts files - Add loading indicators and better error handling - Add more consistent toast messages on success and error * Refactor to avoid mutating function param state * Removed error in message type conversion We don't actually want to keep the interactive message parameters when we're converting an interactive message into a type. Before this commit, this function would convert the message type to "text" but also keep all the interactive state, too. This doesn't cause an issue in our editing screens, but would cause 400 errors if sent to the WhatsApp API * Tests for WhatsApp message and template logic
Suspect IssuesThis pull request was deployed and Sentry observed the following issues:
Did you find this useful? React with a 👍 or 👎 |
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.
This is a relatively large PR that effectively updates the whatsapp thread editing interface, and provides a better structure for components and code. The goals are to:
I think by-and-large it does that. However, there are four things that are worth noting:
shadcn-sveltecauses this bug sometimes: Dialog is capturing focus events and stopping them from being propogated huntabyte/bits-ui#755 I haven't been able to find a pattern with triggering it, but it's definitely annoying as it crashes the browser tab. I tried bumping the version of the underlyingbits-uilibrary, but that didn't seem to help. I'm happy to push it as-is to production, but I will want to monitor it closely.