diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 19f899dc0..331a50c60 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -166,6 +166,7 @@
"x82IOl": "Mute",
"yL9vD/": "Welcome to your Mattermost Enterprise trial! It expires on {trialExpirationDate}. You now have access to RTCD services, call recordings, guest accounts, automated compliance reports, and mobile secure-ID push notifications, among many other features. View all features in our documentation.",
"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"
}
\ No newline at end of file
diff --git a/webapp/src/components/custom_post_types/post_type_recording.tsx b/webapp/src/components/custom_post_types/post_type_recording.tsx
index 250515676..04221da9c 100644
--- a/webapp/src/components/custom_post_types/post_type_recording.tsx
+++ b/webapp/src/components/custom_post_types/post_type_recording.tsx
@@ -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((state) => Boolean(state.plugins?.plugins?.[aiPluginID]));
+};
+
+type CallsPostButtonClickedFunc = (post: any) => void;
+
+const useCallsPostButtonClicked = () => {
+ return useSelector((state) => {
+ //@ts-ignore plugins state is a thing
+ return state['plugins-' + aiPluginID]?.callsPostButtonClicked;
+ });
+};
+
+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);
+ 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 (
-
+ <>
+
+ {aiAvailable &&
+
+
+
+
+ }
+ >
);
};
diff --git a/webapp/src/components/icons/ai.tsx b/webapp/src/components/icons/ai.tsx
new file mode 100644
index 000000000..abca38a5f
--- /dev/null
+++ b/webapp/src/components/icons/ai.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import Svg from './svg';
+
+const IconAI = () => (
+
+
+);
+
+export default IconAI;