honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Style standardization 

Added some adjustments to padding, avatar size, etc.
This commit is contained in:
Chris Kent 2024-01-29 00:18:55 -05:00
parent df7cbc59da
commit e35e1b642c
4 changed files with 44 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
samples/react-azure-openai-api-stream/src/webparts/chatStreaming/components/AssistantResponse.tsx
View File

@ -14,7 +14,9 @@ export default class AssistantResponse extends React.Component<
public render(): React.ReactElement<IAssistantResponseProps> { public render(): React.ReactElement<IAssistantResponseProps> {
return ( return (
<Stack horizontal className={styles.assistantResponse}> <Stack horizontal className={styles.assistantResponse}>
<Icon iconName="Robot" /> <div className={styles.avatar}>
<Icon iconName="Robot" />
</div>
<div className={styles.messageBox}> <div className={styles.messageBox}>
<p className={styles.message}>{this.props.message}</p> <p className={styles.message}>{this.props.message}</p>
<div className={styles.beak}/> <div className={styles.beak}/>

55
samples/react-azure-openai-api-stream/src/webparts/chatStreaming/components/ChatStreaming.module.scss
View File

@ -20,41 +20,64 @@
.messagesList { .messagesList {
background-color: "[theme:neutralLighter, default: #f3f2f1]"; background-color: "[theme:neutralLighter, default: #f3f2f1]";
min-height: 200px; min-height: 400px;
border-radius: 8px;
.scrollablePane { .scrollablePane {
padding: 20px;
:global {
.ms-ScrollablePane--contentContainer {
padding: 8px;
}
}
} }
} }
.userQuestion { .userQuestion {
padding: 5px; padding-bottom: 8px;
gap: 30px; gap: 12px;
.avatar {
--person-avatar-size: 32px;
margin-top: 8px;
}
.beak { .beak {
right: -10px; right: -15px;
border-left: 10px solid "[theme:white, default: #ffffff]"; border-left: 15px solid "[theme:white, default: #ffffff]";
margin-right: 5px;
} }
} }
.assistantResponse { .assistantResponse {
padding: 10px; padding-bottom: 8px;
gap: 30px; gap: 12px;
i { .avatar {
margin-top: 8px;
background-color: "[theme:white, default: #ffffff]";
color: "[theme:neutralPrimary, default: #323130]";
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 22px; font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
} }
.beak { .beak {
left: -10px; left: -15px;
border-right: 10px solid "[theme:white, default: #ffffff]"; border-right: 15px solid "[theme:white, default: #ffffff]";
margin-left: 5px;
} }
} }
.messageBox { .messageBox {
position: relative; position: relative;
border-radius: 5px; border-radius: 8px;
padding: 5px; padding: 0 12px;
background-color: "[theme:white, default: #ffffff]"; background-color: "[theme:white, default: #ffffff]";
font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
font-size: 14px; font-size: 14px;
@ -70,11 +93,11 @@
.beak { .beak {
content: ""; content: "";
position: absolute; position: absolute;
top: 10px; top: 9px;
width: 0; width: 0;
height: 0; height: 0;
border-top: 10px solid transparent; border-top: 15px solid transparent;
border-bottom: 10px solid transparent; border-bottom: 15px solid transparent;
} }
} }

3
samples/react-azure-openai-api-stream/src/webparts/chatStreaming/components/UserMessage.tsx
View File

@ -40,8 +40,7 @@ export default class UserMessage extends React.Component<IUserMessageProps, {}>
value={this.props.textFieldValue} value={this.props.textFieldValue}
onChange={this._onChange} onChange={this._onChange}
onKeyDown={this._keyDownHandler} onKeyDown={this._keyDownHandler}
label="User message" placeholder={'Talk to our super cool AI system!\n(Shift + Enter for new line)'}
placeholder="Type user query here."
/> />
</Stack.Item> </Stack.Item>
<Stack verticalAlign='end'> <Stack verticalAlign='end'>

2
samples/react-azure-openai-api-stream/src/webparts/chatStreaming/components/UserQuestion.tsx
View File

@ -19,7 +19,7 @@ export default class UserQuestion extends React.Component<
<p className={styles.message}>{this.props.message}</p> <p className={styles.message}>{this.props.message}</p>
<div className={styles.beak} /> <div className={styles.beak} />
</div> </div>
<Person personQuery="me" view={ViewType.image} avatarSize="auto" /> <Person className={styles.avatar} personQuery="me" view={ViewType.image} avatarSize="auto" />
</Stack> </Stack>
); );
} }