Add create summary button. (#567)

* Add create summary button.

* i18n

* UX Feedback.

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 <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"
 }

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<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;
+    });
+};
+
+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 (
-        <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>
+            }
+        </>
     );
 };

webapp/src/components/icons/ai.tsx

@@ -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;