Expose components needed for the ai plugin new interface (#24972)

* Export thread components

* Exporting AdvancedCreateComment

* Expose components needed for the ai plugin new interface

* Exporting the placeholder for the plugin CreatePost component, and simplify the export

* Fixing linter errors

* Fixing type errors

* Reverting typescript related changes

* Cheating typescript to keep the changes as minimal as possible

* Fix linter errors

webapp/channels/src/components/advanced_create_comment/advanced_create_comment.tsx

@@ -198,6 +198,7 @@ export type Props = {
     isFormattingBarHidden: boolean;
     searchAssociatedGroupsForReference: (prefix: string, teamId: string, channelId: string | undefined) => Promise<{ data: any }>;
     postEditorActions: PluginComponent[];
+    placeholder?: string;
 }
 
 type State = {
@@ -1311,6 +1312,7 @@ class AdvancedCreateComment extends React.PureComponent<Props, State> {
                     fileUploadRef={this.fileUploadRef}
                     isThreadView={this.props.isThreadView}
                     additionalControls={pluginItems.filter(Boolean)}
+                    placeholder={this.props.placeholder}
                 />
             </form>
         );

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx

@@ -101,6 +101,7 @@ type Props = {
     additionalControls?: React.ReactNodeArray;
     labels?: React.ReactNode;
     disableSend?: boolean;
+    placeholder?: string;
 }
 
 const AdvanceTextEditor = ({
@@ -156,6 +157,7 @@ const AdvanceTextEditor = ({
     additionalControls,
     labels,
     disableSend = false,
+    placeholder,
 }: Props) => {
     const readOnlyChannel = !canPost;
     const {formatMessage} = useIntl();
@@ -295,7 +297,9 @@ const AdvanceTextEditor = ({
     );
 
     let createMessage;
-    if (currentChannel && !readOnlyChannel) {
+    if (placeholder) {
+        createMessage = placeholder;
+    } else if (currentChannel && !readOnlyChannel) {
         createMessage = formatMessage(
             {
                 id: 'create_post.write',

webapp/channels/src/components/threading/thread_viewer/thread_viewer.tsx

@@ -48,6 +48,7 @@ export type Props = Attrs & {
     highlightedPostId?: Post['id'];
     selectedPostFocusedAt?: number;
     isThreadView?: boolean;
+    inputPlaceholder?: string;
 };
 
 type State = {
@@ -212,6 +213,7 @@ export default class ThreadViewer extends React.PureComponent<Props, State> {
                             <FileUploadOverlay overlayType='right'/>
                             {this.props.selected && (
                                 <DeferredThreadViewerVirt
+                                    inputPlaceholder={this.props.inputPlaceholder}
                                     key={this.props.selected.id}
                                     channel={this.props.channel}
                                     onCardClick={this.handleCardClick}

webapp/channels/src/components/threading/virtualized_thread_viewer/create_comment.tsx

@@ -26,6 +26,7 @@ type Props = {
     threadId: string;
     latestPostId: Post['id'];
     isThreadView?: boolean;
+    placeholder?: string;
 };
 
 const CreateComment = forwardRef<HTMLDivElement, Props>(({
@@ -34,6 +35,7 @@ const CreateComment = forwardRef<HTMLDivElement, Props>(({
     threadId,
     latestPostId,
     isThreadView,
+    placeholder,
 }: Props, ref) => {
     const getChannel = useMemo(makeGetChannel, []);
     const rootPost = useSelector((state: GlobalState) => getPost(state, threadId));
@@ -95,6 +97,7 @@ const CreateComment = forwardRef<HTMLDivElement, Props>(({
             data-testid='comment-create'
         >
             <AdvancedCreateComment
+                placeholder={placeholder}
                 focusOnMount={focusOnMount}
                 channelId={channel.id}
                 latestPostId={latestPostId}

webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx

@@ -43,6 +43,7 @@ type Props = {
     isThreadView: boolean;
     lastViewedAt: number;
     newMessagesSeparatorActions: PluginComponent[];
+    inputPlaceholder?: string;
 }
 
 type State = {
@@ -355,6 +356,7 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
         if (isCreateComment(itemId)) {
             return (
                 <CreateComment
+                    placeholder={this.props.inputPlaceholder}
                     focusOnMount={!this.props.isThreadView && (this.state.userScrolledToBottom || (!this.state.userScrolled && this.getInitialPostIndex() === 0))}
                     isThreadView={this.props.isThreadView}
                     latestPostId={this.props.lastPost.id}

webapp/channels/src/plugins/export.js

@@ -12,6 +12,7 @@ import {openPricingModal} from 'components/global_header/right_controls/plan_upg
 import {useNotifyAdmin} from 'components/notify_admin_cta/notify_admin_cta';
 import PurchaseModal from 'components/purchase_modal';
 import StartTrialFormModal from 'components/start_trial_form_modal';
+import ThreadViewer from 'components/threading/thread_viewer';
 import Timestamp from 'components/timestamp';
 import BotTag from 'components/widgets/tag/bot_tag';
 import Avatar from 'components/widgets/users/avatar';
@@ -24,6 +25,7 @@ import {formatText} from 'utils/text_formatting';
 import {useWebSocket, useWebSocketClient, WebSocketContext} from 'utils/use_websocket';
 import {imageURLForUser} from 'utils/utils';
 
+import CreatePost from './exported_create_post';
 import {openInteractiveDialog} from './interactive_dialog'; // This import has intentional side effects. Do not remove without research.
 import Textbox from './textbox';
 
@@ -86,6 +88,8 @@ window.Components = {
     imageURLForUser,
     BotBadge: BotTag,
     StartTrialFormModal,
+    ThreadViewer,
+    CreatePost,
 };
 
 // This is a prototype of the Product API for use by internal plugins only while we transition to the proper architecture

webapp/channels/src/plugins/exported_create_post.tsx

@@ -0,0 +1,35 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import AdvancedCreateComment from 'components/advanced_create_comment';
+
+import type {PostDraft} from 'types/store/draft';
+
+type Props = {
+    placeholder?: string;
+    onSubmit: (draft: PostDraft) => void;
+}
+
+const ExportedCreatePost = ({placeholder, onSubmit}: Props) => {
+    const Component = AdvancedCreateComment as any;
+
+    return (
+        <Component
+            placeholder={placeholder}
+            rootDeleted={false}
+            channelId={undefined}
+            rootId={undefined}
+            latestPostId={undefined}
+            onSubmit={onSubmit}
+            onUpdateCommentDraft={() => null}
+            updateCommentDraftWithRootId={() => null}
+            onMoveHistoryIndexBack={() => null}
+            onMoveHistoryIndexForward={() => null}
+            onEditLatestPost={() => ({data: true})}
+        />
+    );
+};
+
+export default ExportedCreatePost;