Merge branch 'feature/ai-summurize' into 'master'

Staging feature/ai-summurize See merge request kchat/webapp!838
Infomaniak · Aug 13, 2024 · 077f0f0 · 077f0f0
2 parents 90c5ab3 + 1dfde0b
commit 077f0f0
Show file tree

Hide file tree

Showing 45 changed files with 2,226 additions and 71 deletions.
diff --git a/webapp/channels/package.json b/webapp/channels/package.json
@@ -7,6 +7,7 @@
   "private": true,
   "dependencies": {
     "@floating-ui/react": "0.26.6",
+    "@floating-ui/react-dom-interactions": "0.13.3",
     "@giphy/js-fetch-api": "5.1.0",
     "@giphy/react-components": "8.1.0",
     "@guyplusplus/turndown-plugin-gfm": "1.0.7",

diff --git a/webapp/channels/src/actions/ai_actions.tsx b/webapp/channels/src/actions/ai_actions.tsx
@@ -0,0 +1,20 @@
+import type {DispatchFunc} from 'mattermost-redux/types/actions';
+
+import {ActionTypes} from 'utils/constants';
+import {generateId} from 'utils/utils';
+
+import PostMenu from 'plugins/ai/components/post_menu';
+
+export function registerInternalAiPlugin() {
+    return async (dispatch: DispatchFunc) => {
+        dispatch({
+            type: ActionTypes.RECEIVED_PLUGIN_COMPONENT,
+            name: 'PostAction',
+            data: {
+                id: generateId(),
+                pluginId: 'ia',
+                component: PostMenu,
+            },
+        });
+    };
+}
diff --git a/webapp/channels/src/components/hint-toast/__snapshots__/hint_toast.test.tsx.snap b/webapp/channels/src/components/hint-toast/__snapshots__/hint_toast.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`components/HintToast should match snapshot 1`] = `
   className="hint-toast"
   data-testid="hint-toast"
 >
+  <div />
   <div
     className="hint-toast__message"
   >

diff --git a/webapp/channels/src/components/hint-toast/hint_toast.scss b/webapp/channels/src/components/hint-toast/hint_toast.scss
@@ -9,6 +9,11 @@
     font-size: 14px;
     font-weight: bold;
 
+    &.thread {
+        display: flex;
+        justify-content: space-between;
+    }
+
     .hint-toast__message {
         display: inline-block;
         line-height: 20px;

diff --git a/webapp/channels/src/components/hint-toast/hint_toast.tsx b/webapp/channels/src/components/hint-toast/hint_toast.tsx
@@ -12,9 +12,10 @@ export const HINT_TOAST_TESTID = 'hint-toast';
 type Props = {
     children: React.ReactNode;
     onDismiss: () => void;
+    isThreadView?: boolean;
 }
 
-export const HintToast: React.FC<Props> = ({children, onDismiss}: Props) => {
+export const HintToast: React.FC<Props> = ({children, onDismiss, isThreadView}: Props) => {
     const handleDismiss = () => {
         if (typeof onDismiss === 'function') {
             onDismiss();
@@ -24,8 +25,9 @@ export const HintToast: React.FC<Props> = ({children, onDismiss}: Props) => {
     return (
         <div
             data-testid={HINT_TOAST_TESTID}
-            className='hint-toast'
+            className={isThreadView ? 'hint-toast thread' : 'hint-toast'}
         >
+            <div/>
             <div
                 className='hint-toast__message'
             >

diff --git a/webapp/channels/src/components/logged_in/index.ts b/webapp/channels/src/components/logged_in/index.ts
@@ -14,6 +14,7 @@ import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams';
 import {getCurrentUser, shouldShowTermsOfService} from 'mattermost-redux/selectors/entities/users';
 import type {ThunkActionFunc} from 'mattermost-redux/types/actions';
 
+import {registerInternalAiPlugin} from 'actions/ai_actions';
 import {registerInternalKdrivePlugin} from 'actions/kdrive_actions';
 import {declineCall, joinCall, cancelCall} from 'actions/kmeet_calls';
 import {updateTeamsOrderForUser} from 'actions/team_actions';
@@ -72,6 +73,7 @@ function mapDispatchToProps(dispatch: Dispatch) {
             getChannelURLAction,
             updateApproximateViewTime,
             registerInternalKdrivePlugin,
+            registerInternalAiPlugin,
             setTheme,
             updateTeamsOrderForUser,
             joinCall,

diff --git a/webapp/channels/src/components/logged_in/logged_in.test.tsx b/webapp/channels/src/components/logged_in/logged_in.test.tsx
@@ -54,6 +54,7 @@ describe('components/logged_in/LoggedIn', () => {
             joinCall: jest.fn(),
             cancelCall: jest.fn(),
             declineCall: jest.fn(),
+            registerInternalAiPlugin: jest.fn(),
         },
         isCurrentChannelManuallyUnread: false,
         showTermsOfService: false,

diff --git a/webapp/channels/src/components/logged_in/logged_in.tsx b/webapp/channels/src/components/logged_in/logged_in.tsx
@@ -51,6 +51,7 @@ export type Props = {
         joinCall: (channelId: string) => void;
         declineCall: (channelId: string) => void;
         cancelCall: (channelId: string) => void;
+        registerInternalAiPlugin: () => void;
     };
     showTermsOfService: boolean;
     location: {
@@ -82,6 +83,7 @@ export default class LoggedIn extends React.PureComponent<Props> {
         if (!UserAgent.isDesktopApp() || isServerVersionGreaterThanOrEqualTo(UserAgent.getDesktopVersion(), '2.4.0')) {
             this.props.actions.registerInternalKdrivePlugin();
         }
+        this.props.actions.registerInternalAiPlugin();
         this.props.actions.autoUpdateTimezone(getBrowserTimezone());
 
         // Make sure the websockets close and reset version

diff --git a/webapp/channels/src/components/post/post_options.tsx b/webapp/channels/src/components/post/post_options.tsx
@@ -39,6 +39,7 @@ type Props = {
     shouldShowActionsMenu?: boolean;
     oneClickReactionsEnabled?: boolean;
     recentEmojis: Emoji[];
+    isBot: boolean;
     isExpanded?: boolean;
     hover?: boolean;
     isMobileView: boolean;
@@ -193,6 +194,7 @@ const PostOptions = (props: Props): JSX.Element => {
                     const Component = item.component as any;
                     return (
                         <Component
+                            location={props.location}
                             post={props.post}
                             key={item.id}
                         />

diff --git a/webapp/channels/src/components/post_view/post_list/__snapshots__/post_list.test.tsx.snap b/webapp/channels/src/components/post_view/post_list/__snapshots__/post_list.test.tsx.snap
@@ -27,6 +27,7 @@ exports[`components/post_view/post_list snapshot for loading when there are no p
         autoRetryEnable={true}
         channelId="fake-id"
         isMobileView={false}
+        isThreadView={false}
         lastViewedAt={1532345226632}
         loadingNewerPosts={false}
         loadingOlderPosts={false}
@@ -65,6 +66,7 @@ exports[`components/post_view/post_list snapshot with couple of posts 1`] = `
         autoRetryEnable={true}
         channelId="fake-id"
         isMobileView={false}
+        isThreadView={false}
         lastViewedAt={1532345226632}
         loadingNewerPosts={false}
         loadingOlderPosts={false}

diff --git a/webapp/channels/src/components/post_view/post_list/post_list.test.tsx b/webapp/channels/src/components/post_view/post_list/post_list.test.tsx
@@ -48,6 +48,7 @@ const baseProps = {
     isMobileView: false,
     hasInaccessiblePosts: false,
     shouldStartFromBottomWhenUnread: false,
+    isThreadView: false,
 };
 
 describe('components/post_view/post_list', () => {

diff --git a/webapp/channels/src/components/post_view/post_list/post_list.tsx b/webapp/channels/src/components/post_view/post_list/post_list.tsx
@@ -109,7 +109,7 @@ export interface Props {
     toggleShouldStartFromBottomWhenUnread: () => void;
     shouldStartFromBottomWhenUnread: boolean;
     hasInaccessiblePosts: boolean;
-
+    isThreadView: boolean;
     actions: {
 
         /*
@@ -376,6 +376,7 @@ export default class PostList extends React.PureComponent<Props, State> {
                             latestPostTimeStamp={this.props.latestPostTimeStamp}
                             isMobileView={this.props.isMobileView}
                             lastViewedAt={this.props.lastViewedAt}
+                            isThreadView={this.props.isThreadView}
                         />
                     </div>
                 </div>

diff --git a/...pp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.test.tsx b/...pp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.test.tsx
@@ -44,6 +44,7 @@ describe('PostList', () => {
         lastViewedAt: 0,
         shouldStartFromBottomWhenUnread: false,
         actions: baseActions,
+        isThreadView: false,
     };
 
     const postListIdsForClassNames = [

diff --git a/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx b/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx
@@ -96,7 +96,7 @@ type Props = {
     focusedPostId?: string;
 
     shouldStartFromBottomWhenUnread: boolean;
-
+    isThreadView: boolean;
     actions: {
 
         /*
@@ -674,6 +674,7 @@ export default class PostList extends React.PureComponent<Props, State> {
                 showScrollToBottomToast={this.state.showScrollToBottomToast}
                 onScrollToBottomToastDismiss={this.handleScrollToBottomToastDismiss}
                 hideScrollToBottomToast={this.hideScrollToBottomToast}
+                isThreadView={this.props.isThreadView}
             />
         );
     };

diff --git a/webapp/channels/src/components/post_view/post_view.test.tsx b/webapp/channels/src/components/post_view/post_view.test.tsx
@@ -17,6 +17,7 @@ describe('components/post_view/post_view', () => {
         channelId: '1234',
         focusedPostId: '12345',
         unreadScrollPosition: Preferences.UNREAD_SCROLL_POSITION_START_FROM_LEFT,
+        isThreadView: false,
     };
     jest.useFakeTimers();
 

diff --git a/webapp/channels/src/components/post_view/post_view.tsx b/webapp/channels/src/components/post_view/post_view.tsx
@@ -15,6 +15,7 @@ interface Props {
     channelId: string;
     focusedPostId?: string;
     unreadScrollPosition: string;
+    isThreadView: boolean;
 }
 
 interface State {
@@ -99,6 +100,7 @@ export default class PostView extends React.PureComponent<Props, State> {
                     shouldStartFromBottomWhenUnread={this.state.shouldStartFromBottomWhenUnread}
                     toggleShouldStartFromBottomWhenUnread={this.toggleShouldStartFromBottomWhenUnread}
                     focusedPostId={this.props.focusedPostId}
+                    isThreadView={this.props.isThreadView}
                 />
             </div>
         );

diff --git a/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx b/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx
@@ -18,6 +18,8 @@ import CRTThreadsPaneTutorialTip
 import {getHistory} from 'utils/browser_history';
 import Constants, {RHSStates} from 'utils/constants';
 
+import RHSHeader from 'plugins/ai/components/rhs/rhs_header';
+
 import type {RhsState} from 'types/store/rhs';
 
 interface Props extends WrappedComponentProps {
@@ -41,6 +43,7 @@ interface Props extends WrappedComponentProps {
     closeRightHandSide: (e?: React.MouseEvent) => void;
     toggleRhsExpanded: (e: React.MouseEvent) => void;
     setThreadFollow: (userId: string, teamId: string, threadId: string, newState: boolean) => void;
+    onChatHistoryClick?: () => void;
 }
 
 class RhsHeaderPost extends React.PureComponent<Props> {
@@ -174,74 +177,83 @@ class RhsHeaderPost extends React.PureComponent<Props> {
         }
 
         return (
-            <div className='sidebar--right__header'>
-                <span className='sidebar--right__title'>
-                    {back}
-                    <FormattedMessage
-                        id='rhs_header.details'
-                        defaultMessage='Thread'
-                    />
-                    {channelName &&
+            <>
+                <div className='sidebar--right__header'>
+                    <span className='sidebar--right__title'>
+                        {back}
+                        <FormattedMessage
+                            id='rhs_header.details'
+                            defaultMessage='Thread'
+                        />
+                        {channelName &&
                         <button
                             onClick={this.handleJumpClick}
                             className='style--none sidebar--right__title__channel'
                         >
                             {channelName}
                         </button>
-                    }
-                </span>
-                <div className='controls'>
-                    {this.props.isCollapsedThreadsEnabled ? (
-                        <FollowButton
-                            className='sidebar--right__follow__thread'
-                            isFollowing={isFollowingThread}
-                            onClick={this.handleFollowChange}
-                        />
-                    ) : null}
+                        }
+                    </span>
 
-                    <OverlayTrigger
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
-                        placement='bottom'
-                        overlay={this.props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
-                    >
-                        <button
-                            type='button'
-                            className='sidebar--right__expand btn btn-icon btn-sm'
-                            aria-label='Expand'
-                            onClick={this.props.toggleRhsExpanded}
-                        >
-                            <i
-                                className='icon icon-arrow-expand'
-                                aria-label={formatMessage({id: 'rhs_header.expandSidebarTooltip.icon', defaultMessage: 'Expand Sidebar Icon'})}
-                            />
-                            <i
-                                className='icon icon-arrow-collapse'
-                                aria-label={formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
+                    <div className='controls'>
+                        {this.props.isCollapsedThreadsEnabled ? (
+                            <FollowButton
+                                className='sidebar--right__follow__thread'
+                                isFollowing={isFollowingThread}
+                                onClick={this.handleFollowChange}
                             />
-                        </button>
-                    </OverlayTrigger>
+                        ) : null}
 
-                    <OverlayTrigger
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
-                        placement='top'
-                        overlay={closeSidebarTooltip}
-                    >
-                        <button
-                            id='rhsCloseButton'
-                            type='button'
-                            className='sidebar--right__close btn btn-icon btn-sm'
-                            aria-label='Close'
-                            onClick={this.props.closeRightHandSide}
+                        <OverlayTrigger
+                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                            placement='bottom'
+                            overlay={this.props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
                         >
-                            <i
-                                className='icon icon-close'
-                                aria-label={formatMessage({id: 'rhs_header.closeTooltip.icon', defaultMessage: 'Close Sidebar Icon'})}
-                            />
-                        </button>
-                    </OverlayTrigger>
+                            <button
+                                type='button'
+                                className='sidebar--right__expand btn btn-icon btn-sm'
+                                aria-label='Expand'
+                                onClick={this.props.toggleRhsExpanded}
+                            >
+                                <i
+                                    className='icon icon-arrow-expand'
+                                    aria-label={formatMessage({id: 'rhs_header.expandSidebarTooltip.icon', defaultMessage: 'Expand Sidebar Icon'})}
+                                />
+                                <i
+                                    className='icon icon-arrow-collapse'
+                                    aria-label={formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
+                                />
+                            </button>
+                        </OverlayTrigger>
+
+                        <OverlayTrigger
+                            delayShow={Constants.OVERLAY_TIME_DELAY}
+                            placement='top'
+                            overlay={closeSidebarTooltip}
+                        >
+                            <button
+                                id='rhsCloseButton'
+                                type='button'
+                                className='sidebar--right__close btn btn-icon btn-sm'
+                                aria-label='Close'
+                                onClick={this.props.closeRightHandSide}
+                            >
+                                <i
+                                    className='icon icon-close'
+                                    aria-label={formatMessage({id: 'rhs_header.closeTooltip.icon', defaultMessage: 'Close Sidebar Icon'})}
+                                />
+                            </button>
+                        </OverlayTrigger>
+                    </div>
+                    {this.props.showThreadsTutorialTip && <CRTThreadsPaneTutorialTip/>}
                 </div>
-                {this.props.showThreadsTutorialTip && <CRTThreadsPaneTutorialTip/>}
-            </div>
+                {this.props.channel.display_name === 'kChat Bot' && (
+                    <RHSHeader
+                        onChatHistoryClick={this.props.onChatHistoryClick}
+                        channelName={this.props.channel.name}
+                    />
+                )}
+            </>
         );
     }
 }

diff --git a/webapp/channels/src/components/rhs_thread/__snapshots__/rhs_thread.test.tsx.snap b/webapp/channels/src/components/rhs_thread/__snapshots__/rhs_thread.test.tsx.snap
@@ -27,6 +27,7 @@ exports[`components/RhsThread should match snapshot 1`] = `
         "update_at": 0,
       }
     }
+    onChatHistoryClick={[Function]}
     rootPostId="id"
   />
   <Connect(ThreadViewer)