diff --git a/webapp/src/components/llmbot_post.tsx b/webapp/src/components/llmbot_post.tsx index 5b80064a..27147e25 100644 --- a/webapp/src/components/llmbot_post.tsx +++ b/webapp/src/components/llmbot_post.tsx @@ -1,7 +1,7 @@ import React, {MouseEvent, useEffect, useRef, useState} from 'react'; import {FormattedMessage} from 'react-intl'; import {useSelector} from 'react-redux'; -import styled, {css, createGlobalStyle} from 'styled-components'; +import styled from 'styled-components'; import {WebSocketMessage} from '@mattermost/client'; import {GlobalState} from '@mattermost/types/store'; @@ -10,7 +10,7 @@ import {SendIcon} from '@mattermost/compass-icons/components'; import {doPostbackSummary, doRegenerate, doStopGenerating} from '@/client'; -import {useSelectNotAIPost, useSelectPost} from '@/hooks'; +import {useSelectNotAIPost} from '@/hooks'; import {PostMessagePreview} from '@/mm_webapp'; @@ -18,29 +18,7 @@ import PostText from './post_text'; import IconRegenerate from './assets/icon_regenerate'; import IconCancel from './assets/icon_cancel'; -const FixPostHover = createGlobalStyle<{disableHover?: string}>` - ${(props) => props.disableHover && css` - &&&& { - [data-testid="post-menu-${props.disableHover}"] { - display: none !important; - } - [data-testid="post-menu-${props.disableHover}"]:hover { - display: none !important; - } - }`} -`; - -const PostBody = styled.div<{disableHover?: boolean}>` - ${(props) => props.disableHover && css` - ::before { - content: ''; - position: absolute; - width: 110%; - height: 110%; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - }`} +const PostBody = styled.div` `; const ControlsBar = styled.div` @@ -92,27 +70,7 @@ const PostSummaryButton = styled(GenerationButton)` } `; -const StopGeneratingButton = styled.button` - display: flex; - padding: 5px 12px; - align-items: center; - justify-content: center; - gap: 6px; - border-radius: 4px; - border: 1px solid rgba(var(--center-channel-color,0.12)); - background: var(--center-channel-bg); - - box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.12); - - position: absolute; - left: 50%; - top: -5px; - transform: translateX(-50%); - - color: var(--button-bg); - - font-size: 12px; - font-weight: 600; +const StopGeneratingButton = styled(GenerationButton)` `; const PostSummaryHelpMessage = styled.div` @@ -187,12 +145,6 @@ export const LLMBotPost = (props: Props) => { doStopGenerating(props.post.id); }; - const stopPropagationIfGenerating = (e: MouseEvent) => { - if (generating) { - e.stopPropagation(); - } - }; - const postSummary = async () => { const result = await doPostbackSummary(props.post.id); selectPost(result.rootid, result.channelid); @@ -218,17 +170,13 @@ export const LLMBotPost = (props: Props) => { const showRegenerate = !generating && requesterIsCurrentUser && !isNoShowRegen; const showPostbackButton = !generating && requesterIsCurrentUser && isTranscriptionResult; - const showControlsBar = (showRegenerate || showPostbackButton) && message !== ''; + const showStopGeneratingButton = generating && requesterIsCurrentUser; + const showControlsBar = (showRegenerate || showPostbackButton || showStopGeneratingButton) && message !== ''; return ( - {isThreadSummaryPost && permalinkView && <> {permalinkView} @@ -240,15 +188,6 @@ export const LLMBotPost = (props: Props) => { postID={props.post.id} showCursor={generating} /> - { generating && requesterIsCurrentUser && - - - - - } { showPostbackButton && @@ -256,6 +195,15 @@ export const LLMBotPost = (props: Props) => { } { showControlsBar && + { showStopGeneratingButton && + + + + + } {showPostbackButton &&