Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adapt to RHS scroll direction change #230

Merged
merged 2 commits into from
Aug 13, 2024
Merged

Adapt to RHS scroll direction change #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
80822f9
Pin RHS to bottom
crspeller Aug 6, 2024
993690a
Move stop generating button.
crspeller Aug 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 15 additions & 67 deletions webapp/src/components/llmbot_post.tsx
View file
Open in desktop
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`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

0/5 here, I see the value on giving a name to the div itself, but maybe, because it is no longer needed from the styles perspective we can remove this. Anyway, I'm ok leaving it as is, just to give it a name.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The name is helpful for debugging and whatnot I think we can leave it.

`;

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
Open in desktop
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
Open in desktop
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