Add create summary button. #567
Conversation
crspeller
added
1: UX Review
| const useCallsPostButtonClicked = () => { | ||
| return useSelector<GlobalState, CallsPostButtonClickedFunc>((state) => { | ||
| //@ts-ignore plugins state is a thing | ||
| return state['plugins-' + aiPluginID]?.callsPostButtonClicked; |
There was a problem hiding this comment.
This is supplied by the AI plugin. That way all the logic for what to do when the button is clicked is handled on the AI plugin side.
There was a problem hiding this comment.
I like it, I think this is the right way of integrating between plugins.
There was a problem hiding this comment.
Same thing here as well.
But otherwise, totally agree with Claudio -- this is the way to do it!
| const useCallsPostButtonClicked = () => { | ||
| return useSelector<GlobalState, CallsPostButtonClickedFunc>((state) => { | ||
| //@ts-ignore plugins state is a thing | ||
| return state['plugins-' + aiPluginID]?.callsPostButtonClicked; |
There was a problem hiding this comment.
I like it, I think this is the right way of integrating between plugins.
| const useCallsPostButtonClicked = () => { | ||
| return useSelector<GlobalState, CallsPostButtonClickedFunc>((state) => { | ||
| //@ts-ignore plugins state is a thing | ||
| return state['plugins-' + aiPluginID]?.callsPostButtonClicked; |
There was a problem hiding this comment.
Same thing here as well.
But otherwise, totally agree with Claudio -- this is the way to do it!
There was a problem hiding this comment.
Commented inline on a few minor adjustments to CSS.
For reference, I also updated the figma file with the states for this button. Sorry for not including that previously.
| justify-content: center; | ||
| gap: 6px; | ||
| border-radius: 4px; | ||
| background: rgba(var(--center-channel-color-rgb), 0.04); |
There was a problem hiding this comment.
can we make these adjustments to the default state of the button
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.64);
font-size: 12px;
font-weight: 600;
line-height: 16px
| background: rgba(var(--center-channel-color-rgb), 0.04); | ||
|
|
||
| :hover { | ||
| background: rgba(var(--center-channel-color-rgb), 0.08); |
There was a problem hiding this comment.
And this adjustment to the hover state:
background: rgba(var(--center-channel-color-rgb), 0.08);
| } | ||
|
|
||
| :active { | ||
| background: rgba(var(--button-bg-rgb), 0.08); |
There was a problem hiding this comment.
And this adjustment to the active state:
color: var(--button-bg);
|
Updated with your changes. Hover: Active: |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #567 +/- ##
========================================
+ Coverage 5.49% 5.77% +0.28%
========================================
Files 24 24
Lines 4532 4554 +22
========================================
+ Hits 249 263 +14
- Misses 4265 4273 +8
Partials 18 18 ☔ View full report in Codecov by Sentry. |
streamer45
added
3: Reviews Complete
|
@crspeller Feel free to merge as needed. |
Summary
Adds a create summary button when the AI plugin is available.
The button offloads the logic of what to do afterwards to the AI plugin.
Note that the button positioning varies from the designs because we don't support buttons below the attachments.
Designs: https://mattermost.atlassian.net/wiki/spaces/WD/pages/2510323713/UX+Documentation+for+v1.0#Summarize-Calls-plugin-recordings