Playbooks summary assited by AI

webapp/package.json

@@ -7,7 +7,7 @@
   "dependencies": {
     "@apollo/client": "3.7.3",
     "@floating-ui/react-dom-interactions": "0.6.3",
-    "@mattermost/compass-icons": "0.1.32",
+    "@mattermost/compass-icons": "0.1.47",
     "@mattermost/types": "7.1.0",
     "@mdi/js": "^6.5.95",
     "@mdi/react": "1.5.0",

webapp/src/actions.ts

@@ -151,7 +151,7 @@ export function openUpdateRunStatusModal(
     hasPermission: boolean,
     message?: string,
     reminderInSeconds?: number,
-    finishRunChecked?: boolean
+    finishRunChecked?: boolean,
 ) {
     return modals.openModal(makeUpdateRunStatusModalDefinition({
         playbookRunId,

webapp/src/ai_integration.ts

@@ -0,0 +1,36 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {GlobalState} from 'mattermost-webapp/packages/types/src/store';
+import {useSelector} from 'react-redux';
+
+import {Bot, BotSelector, BotsLoaderHook} from './types/ai';
+
+export const aiPluginID = 'mattermost-ai';
+
+export const useAIAvailable = () => {
+    //@ts-ignore plugins state is a thing
+    return useSelector<GlobalState, boolean>((state) => Boolean(state.plugins?.plugins?.[aiPluginID]));
+};
+
+export const useAIAvailableBots = () => {
+    return useSelector<GlobalState, Bot[]>((state) => {
+        //@ts-ignore plugins state is a thing
+        return state['plugins-' + aiPluginID]?.bots || [];
+    });
+};
+
+export const useBotSelector = () => {
+    return useSelector<GlobalState, BotSelector>((state) => {
+        //@ts-ignore plugins state is a thing
+        return state['plugins-' + aiPluginID]?.botSelector;
+    });
+};
+
+export const useBotsLoaderHook = () => {
+    return useSelector<GlobalState, BotsLoaderHook>((state) => {
+        //@ts-ignore plugins state is a thing
+        return state['plugins-' + aiPluginID]?.botsLoaderHook || (() => null);
+    });
+};
+

webapp/src/client.ts

@@ -62,6 +62,10 @@ export const setSiteUrl = (url?: string): void => {
     apiUrl = `${basePath}/plugins/${manifest.id}/api/v0`;
 };
 
+function playbookRunRoute(playbookRunID: string): string {
+    return `${basePath}/plugins/mattermost-ai/playbook_run/${playbookRunID}`;
+}
+
 export const getSiteUrl = (): string => {
     return siteURL;
 };
@@ -811,3 +815,25 @@ export async function getTeamTopPlaybooks(timeRange: string, page: number, perPa
     }
     return data as InsightsResponse;
 }
+
+export async function generateStatusUpdate(playbookRunID: string, botId: string, instructions: string[], messages: string[]) {
+    const url = `${playbookRunRoute(playbookRunID)}/generate_status`;
+    const response = await fetch(url, Client4.getOptions({
+        method: 'POST',
+        body: JSON.stringify({
+            instructions,
+            messages,
+            bot: botId,
+        }),
+    }));
+
+    if (response.ok) {
+        return;
+    }
+
+    throw new ClientError(Client4.url, {
+        message: '',
+        status_code: response.status,
+        url,
+    });
+}

webapp/src/components/assets/buttons.tsx

@@ -154,6 +154,31 @@ export const InvertedTertiaryButton = styled(Button)`
     }
 `;
 
+export const QuaternaryButton = styled(Button)`
+    transition: all 0.15s ease-out;
+
+    && {
+        color: var(--center-channel-color-64);
+        background-color: rgba(var(--center-channel-color-rgb), 0.08);
+    }
+
+    &&:hover:not([disabled]) {
+        color: var(--center-channel-color-75);
+        background-color: rgba(var(--center-channel-color-rgb), 0.12);
+    }
+
+    &&:active:not([disabled]) {
+        color: var(--button-bg-rgb);
+        background: rgba(var(--button-bg-rgb), 0.16);
+    }
+
+    &&:focus:not([disabled]) {
+        color: var(--button-bg-rgb);
+        background-color: rgba(var(--button-color-rgb), 0.08);
+        box-shadow: inset 0px 0px 0px 2px var(--sidebar-text-active-border-rgb);
+    }
+`;
+
 export const SecondaryButton = styled(TertiaryButton)`
     background: var(--button-color-rgb);
     border: 1px solid var(--button-bg);

webapp/src/components/assets/icons/ai.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Svg from 'src/components/assets/svg';
+
+interface Props {
+    size?: number;
+}
+
+const IconAI = ({size = 16}: Props) => (
+    <Svg
+        width={size}
+        height={size}
+        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'
+        />
+        <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'
+        />
+        <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'
+        />
+    </Svg>
+
+);
+
+export default IconAI;

webapp/src/components/markdown_textbox.tsx

@@ -35,6 +35,7 @@ type Props = {
     hideHelpBar?: boolean;
     previewByDefault?: boolean;
     autoFocus?: boolean;
+    minHeight?: string;
 } & ComponentProps<typeof Textbox>;
 
 const MarkdownTextbox = ({
@@ -48,6 +49,7 @@ const MarkdownTextbox = ({
     previewByDefault,
     autoFocus,
     hideHelpBar,
+    minHeight = '104px',
     ...textboxProps
 }: Props) => {
     const [showPreview, setShowPreview] = useState(previewByDefault);
@@ -63,7 +65,10 @@ const MarkdownTextbox = ({
     });
 
     return (
-        <Wrapper className={className}>
+        <Wrapper
+            className={className}
+            $minHeight={minHeight}
+        >
             <Textbox
                 tabIndex={0}
                 value={value}
@@ -96,7 +101,7 @@ const MarkdownTextbox = ({
     );
 };
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{$minHeight?: string}>`
     .textarea-wrapper {
         margin-bottom: 6px;
     }
@@ -121,7 +126,7 @@ const Wrapper = styled.div`
             }
 
             height: unset;
-            min-height: 104px;
+            min-height: ${(props) => props.$minHeight || '104px'};
             max-height: 324px;
             overflow: auto;
             padding: 12px 30px 12px 16px;