Skip to content

Commit

Permalink
Adapt to RHS scroll direction change (#230)
Browse files Browse the repository at this point in the history 
* Pin RHS to bottom

* Move stop generating button.
  • Loading branch information
@crspeller
crspeller authored Aug 13, 2024
1 parent f9fa5eb commit 2aca528
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 91 deletions.
82 changes: 15 additions & 67 deletions webapp/src/components/llmbot_post.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -10,37 +10,15 @@ 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';

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`
Expand Down Expand Up @@ -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`
Expand Down Expand Up @@ -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);
Expand All @@ -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 (
<PostBody
data-testid='llm-bot-post'
disableHover={generating}
onMouseOver={stopPropagationIfGenerating}
onMouseEnter={stopPropagationIfGenerating}
onMouseMove={stopPropagationIfGenerating}
>
<FixPostHover disableHover={generating ? props.post.id : ''}/>
{isThreadSummaryPost && permalinkView &&
<>
{permalinkView}
Expand All @@ -240,22 +188,22 @@ export const LLMBotPost = (props: Props) => {
postID={props.post.id}
showCursor={generating}
/>
{ generating && requesterIsCurrentUser &&
<StopGeneratingButton
data-testid='stop-generating-button'
onClick={stopGenerating}
>
<IconCancel/>
<FormattedMessage defaultMessage='Stop Generating'/>
</StopGeneratingButton>
}
{ showPostbackButton &&
<PostSummaryHelpMessage>
<FormattedMessage defaultMessage='Would you like to post this summary to the original call thread? You can also ask Copilot to make changes.'/>
</PostSummaryHelpMessage>
}
{ showControlsBar &&
<ControlsBar>
{ showStopGeneratingButton &&
<StopGeneratingButton
data-testid='stop-generating-button'
onClick={stopGenerating}
>
<IconCancel/>
<FormattedMessage defaultMessage='Stop Generating'/>
</StopGeneratingButton>
}
{showPostbackButton &&
<PostSummaryButton
data-testid='llm-bot-post-summary'
Expand Down
1 change: 1 addition & 0 deletions webapp/src/components/rhs/common.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const RHSPaddingContainer = styled.div`
margin-top: 16px;
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 8px;
`;

57 changes: 33 additions & 24 deletions webapp/src/components/rhs/rhs_new_tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,13 @@ const PlusMinus = styled.i`
margin-right: 4px;
`;

const ReverseScroll = styled.div`
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-end;
`;

type Props = {
botChannelId: string
selectPost: (postId: string) => void
Expand Down Expand Up @@ -159,30 +166,32 @@ const RHSNewTab = ({botChannelId, selectPost, setCurrentTab}: Props) => {

return (
<RHSPaddingContainer>
<RHSImage/>
<RHSTitle><FormattedMessage defaultMessage='Ask Copilot anything'/></RHSTitle>
<RHSText><FormattedMessage defaultMessage='The Copilot is here to help. Choose from the prompts below or write your own.'/></RHSText>
<QuestionOptions>
<OptionButton onClick={addBrainstormingIdeas}>
<LightbulbOutlineIcon/>
<FormattedMessage defaultMessage='Brainstorm ideas'/>
</OptionButton>
<OptionButton onClick={addMeetingAgenda}>
<FormatListNumberedIcon/>
<FormattedMessage defaultMessage='Meeting agenda'/>
</OptionButton>
<OptionButton onClick={addProsAndCons}>
<PlusMinus className='icon'>{'±'}</PlusMinus>
<FormattedMessage defaultMessage='Pros and Cons'/>
</OptionButton>
<OptionButton onClick={addToDoList}>
<PlaylistCheckIcon/>
<FormattedMessage defaultMessage='To-do list'/>
</OptionButton>
</QuestionOptions>
<CreatePostContainer>
{editorComponent}
</CreatePostContainer>
<ReverseScroll>
<RHSImage/>
<RHSTitle><FormattedMessage defaultMessage='Ask Copilot anything'/></RHSTitle>
<RHSText><FormattedMessage defaultMessage='The Copilot is here to help. Choose from the prompts below or write your own.'/></RHSText>
<QuestionOptions>
<OptionButton onClick={addBrainstormingIdeas}>
<LightbulbOutlineIcon/>
<FormattedMessage defaultMessage='Brainstorm ideas'/>
</OptionButton>
<OptionButton onClick={addMeetingAgenda}>
<FormatListNumberedIcon/>
<FormattedMessage defaultMessage='Meeting agenda'/>
</OptionButton>
<OptionButton onClick={addProsAndCons}>
<PlusMinus className='icon'>{'±'}</PlusMinus>
<FormattedMessage defaultMessage='Pros and Cons'/>
</OptionButton>
<OptionButton onClick={addToDoList}>
<PlaylistCheckIcon/>
<FormattedMessage defaultMessage='To-do list'/>
</OptionButton>
</QuestionOptions>
<CreatePostContainer>
{editorComponent}
</CreatePostContainer>
</ReverseScroll>
</RHSPaddingContainer>
);
};
Expand Down

0 comments on commit 2aca528

Please sign in to comment.