Style standardization

Added some adjustments to padding, avatar size, etc.

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

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

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

@@ -20,41 +20,64 @@
 
 .messagesList {
   background-color: "[theme:neutralLighter, default: #f3f2f1]";
-  min-height: 200px;
+  min-height: 400px;
+  border-radius: 8px;
 
   .scrollablePane {
-    padding: 20px;
+    
+    :global {
+      .ms-ScrollablePane--contentContainer {
+        padding: 8px;
+      }
+    }
+
   }
 }
 
 .userQuestion {
-  padding: 5px;
-  gap: 30px;
+  padding-bottom: 8px;
+  gap: 12px;
+
+  .avatar {
+    --person-avatar-size: 32px;
+    margin-top: 8px;
+  }
 
   .beak {
-    right: -10px;
-    border-left: 10px solid "[theme:white, default: #ffffff]";
+    right: -15px;
+    border-left: 15px solid "[theme:white, default: #ffffff]";
+    margin-right: 5px;
   }
 }
 
 .assistantResponse {
-  padding: 10px;
-  gap: 30px;
+  padding-bottom: 8px;
+  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;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .beak {
-    left: -10px;
-    border-right: 10px solid "[theme:white, default: #ffffff]";
+    left: -15px;
+    border-right: 15px solid "[theme:white, default: #ffffff]";
+    margin-left: 5px;
   }
 }
 
 .messageBox {
   position: relative;
-  border-radius: 5px;
-  padding: 5px;
+  border-radius: 8px;
+  padding: 0 12px;
   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-size: 14px;
@@ -70,11 +93,11 @@
   .beak {
     content: "";
     position: absolute;
-    top: 10px;
+    top: 9px;
     width: 0;
     height: 0;
-    border-top: 10px solid transparent;
-    border-bottom: 10px solid transparent;
+    border-top: 15px solid transparent;
+    border-bottom: 15px solid transparent;
   }
 }
 

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

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

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

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