Skip to content

Commit

Permalink
Chat UI cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@estohlmann
estohlmann authored Dec 13, 2024
1 parent bcf3cfe commit cadd714
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 28 deletions.
9 changes: 5 additions & 4 deletions lib/user-interface/react/src/components/chatbot/Chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -533,7 +533,7 @@ export default function Chat ({ sessionId }) {
setFileContext={setFileContext}
/>
<div className=' overflow-y-auto p-2 mb-96'>
<SpaceBetween direction='vertical' size='xs'>
<SpaceBetween direction='vertical' size='l'>
{session.history.map((message, idx) => (
<Message key={idx} message={message} showMetadata={showMetadata} isRunning={false} />
))}
Expand All @@ -548,9 +548,10 @@ export default function Chat ({ sessionId }) {
<Container>
<SpaceBetween size='m' direction='vertical'>
<div className='flex'>
<div className='w-2/4'>
<div style={{width: '95%'}}>
<TextareaAutosize
className='float-left min-w-[300px] w-2/3 border-none rounded-md p-2 focus:outline-none focus:ring-none bg-transparent resize-none p-5'
className='float-left min-w-[300px] border-none rounded-md focus:outline-none focus:ring-none bg-transparent resize-none p-5'
style={{width: '100%'}}
maxRows={4}
minRows={1}
spellCheck={true}
Expand All @@ -570,7 +571,7 @@ export default function Chat ({ sessionId }) {
value={userPrompt}
/>
</div>
<div className='w-2/4'>
<div style={{width: '10%'}}>
<div className='flex mb-2 justify-end mt-3'>
<div>
<Button
Expand Down
63 changes: 43 additions & 20 deletions lib/user-interface/react/src/components/chatbot/Message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,13 @@ import ReactMarkdown from 'react-markdown';
import Spinner from '@cloudscape-design/components/spinner';
import Box from '@cloudscape-design/components/box';
import ExpandableSection from '@cloudscape-design/components/expandable-section';
import { SpaceBetween } from '@cloudscape-design/components';
import { Grid, SpaceBetween } from '@cloudscape-design/components';
import { JsonView, darkStyles } from 'react-json-view-lite';
import 'react-json-view-lite/dist/index.css';
import { LisaChatMessage } from '../types';
import { useAppSelector } from '../../config/store';
import { selectCurrentUsername } from '../../shared/reducers/user.reducer';
import Avatar from 'react-avatar';

type MessageProps = {
message?: LisaChatMessage;
Expand All @@ -32,31 +35,51 @@ type MessageProps = {
};

export default function Message ({ message, isRunning, showMetadata }: MessageProps) {
const currentUser = useAppSelector(selectCurrentUsername);
return (
<div className='mt-2'>
<div className='mt-2' style={{overflow: 'hidden'}}>
{isRunning && (
<Container>
<Box float='left'>
<Spinner />
</Box>
</Container>
<Grid gridDefinition={[{colspan: 1}, {colspan: 11}]}>
<div style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-end', height: '100%'}} title={message?.metadata?.modelName}>
<Avatar size='40' round={true} color='#ff7f0e'/>
</div>
<Container>
<Box float='left'>
<Spinner/>
</Box>
</Container>
</Grid>
)}
{message?.type !== 'human' && !isRunning && (
<Container>
<SpaceBetween size='s' direction='vertical'>
<ReactMarkdown children={message.content} />
{message.metadata && showMetadata && (
<ExpandableSection variant='footer' headerText='Metadata'>
<JsonView data={message.metadata} style={darkStyles} />
</ExpandableSection>
)}
</SpaceBetween>
</Container>
<Grid gridDefinition={[{colspan: 1}, {colspan: 11}]}>
<div style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-end', height: '100%'}} title={message?.metadata?.modelName}>
<Avatar size='40' round={true} color='#ff7f0e'/>
</div>
<Container>
<SpaceBetween size='s' direction='vertical'>
<ReactMarkdown children={message.content}/>
{message.metadata && showMetadata && (
<ExpandableSection variant='footer' headerText='Metadata'>
<JsonView data={message.metadata} style={darkStyles}/>
</ExpandableSection>
)}
</SpaceBetween>
</Container>
</Grid>
)}
{message?.type === 'human' && (
<TextContent>
<strong>{message.content}</strong>
</TextContent>
<Grid gridDefinition={[{colspan: 11}, {colspan: 1}]}>
<Container>
<SpaceBetween size='s' alignItems='end'>
<TextContent>
<strong>{message.content}</strong>
</TextContent>
</SpaceBetween>
</Container>
<div style={{display: 'flex', alignItems: 'center', height: '100%'}} title={currentUser}>
<Avatar name={currentUser} size='40' round={true} />
</div>
</Grid>
)}
</div>
);
Expand Down
148 changes: 146 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,15 @@
},
"dependencies": {
"aws-cdk-lib": "2.125.0",
"aws-sdk": "^2.0.0",
"cdk-nag": "^2.27.198",
"constructs": "^10.0.0",
"js-yaml": "^4.1.0",
"lodash": "^4.17.21",
"react-avatar": "^5.0.3",
"source-map-support": "^0.5.21",
"util": "^0.12.5",
"zod": "^3.22.3",
"aws-sdk": "^2.0.0"
"zod": "^3.22.3"
},
"lint-staged": {
"*.ts": [
Expand Down

0 comments on commit cadd714

Please sign in to comment.