Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add create summary button. #567

Merged
merged 3 commits into from
Nov 20, 2023
Merged

Add create summary button. #567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fe94688
Add create summary button.
crspeller Nov 15, 2023
f828665
i18n
crspeller Nov 16, 2023
ec8280f
UX Feedback.
crspeller Nov 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions webapp/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@
"x82IOl": "Mute",
"yL9vD/": "Welcome to your Mattermost Enterprise trial! It expires on {trialExpirationDate}. You now have access to <rtcdDocsLink>RTCD services</rtcdDocsLink>, <recordingsDocsLink>call recordings</recordingsDocsLink>, <guestAccountsLink>guest accounts</guestAccountsLink>, <autoComplianceReportsLink>automated compliance reports</autoComplianceReportsLink>, and <mobileSecureNotificationsLink>mobile secure-ID push notifications</mobileSecureNotificationsLink>, among many other features. View all features in our <documentationLink>documentation</documentationLink>.",
"yO68rk": "Calls are currently running in test mode and only system admins can start them. Reach out directly to your system admin for assistance",
"yidxQc": "Create meeting summary?",
"yjQNKt": "Calls are disabled in this channel.",
"zx0myy": "Participants"
}
74 changes: 72 additions & 2 deletions webapp/src/components/custom_post_types/post_type_recording.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,78 @@
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {useSelector} from 'react-redux';
import styled from 'styled-components';

import {GlobalState} from '@mattermost/types/store';
import IconAI from 'src/components/icons/ai';

const aiPluginID = 'mattermost-ai';

const useAIAvailable = () => {
//@ts-ignore plugins state is a thing
return useSelector<GlobalState, boolean>((state) => Boolean(state.plugins?.plugins?.[aiPluginID]));
};

type CallsPostButtonClickedFunc = (post: any) => void;

const useCallsPostButtonClicked = () => {
return useSelector<GlobalState, CallsPostButtonClickedFunc>((state) => {
//@ts-ignore plugins state is a thing
return state['plugins-' + aiPluginID]?.callsPostButtonClicked;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like it, I think this is the right way of integrating between plugins.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same thing here as well.
But otherwise, totally agree with Claudio -- this is the way to do it!

});
};

const CreateMeetingSummaryButton = styled.button`
display: flex;
border: none;
height: 24px;
padding: 4px 10px;
margin-top: 8px;
margin-bottom: 8px;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 4px;
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;

:hover {
background: rgba(var(--center-channel-color-rgb), 0.12);
color: rgba(var(--center-channel-color-rgb), 0.72);
}

:active {
background: rgba(var(--button-bg-rgb), 0.08);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And this adjustment to the active state:

color: var(--button-bg);

color: var(--button-bg);
}
`;

interface Props {
post: {id: string};
}

export const PostTypeRecording = (props: Props) => {
const aiAvailable = useAIAvailable();
const callsPostButtonClicked = useCallsPostButtonClicked();

const createMeetingSummary = () => {
callsPostButtonClicked?.(props.post);
};

export const PostTypeRecording = () => {
return (
<FormattedMessage defaultMessage={'Here\'s the call recording'}/>
<>
<FormattedMessage defaultMessage={'Here\'s the call recording'}/>
{aiAvailable &&
<CreateMeetingSummaryButton
onClick={createMeetingSummary}
>
<IconAI/>
<FormattedMessage defaultMessage={'Create meeting summary?'}/>
</CreateMeetingSummaryButton>
}
</>
);
};
33 changes: 33 additions & 0 deletions webapp/src/components/icons/ai.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';

import Svg from './svg';

const IconAI = () => (
<Svg
width='15'
height='15'
viewBox='0 0 19 19'
fill='none'
>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M8.50453 8.70448L5.69986 9.5999L8.50453 10.4953L9.39995 13.3L10.2954 10.4953L13.1 9.5999L10.2954 8.70448L9.39995 5.89981L8.50453 8.70448ZM7.17355 7.3735L0.199951 9.5999L7.17355 11.8263L9.39995 18.7999L11.6264 11.8263L18.6 9.5999L11.6264 7.3735L9.39995 0.399902L7.17355 7.3735Z'
fill='currentColor'
fillOpacity='0.56'
/>
<path
d='M3.80005 2L3.36005 3.56L1.80005 4L3.36005 4.44L3.80005 6L4.24005 4.44L5.80005 4L4.24005 3.56L3.80005 2Z'
fill='currentColor'
fillOpacity='0.56'
/>
<path
d='M15.4 12.3999L14.696 14.8959L12.2 15.5999L14.696 16.3039L15.4 18.7999L16.104 16.3039L18.6 15.5999L16.104 14.8959L15.4 12.3999Z'
fill='currentColor'
fillOpacity='0.56'
/>
</Svg>

);

export default IconAI;