Merge branch 'main' into ltierney/5796-updates-getting-started-docs

microsoft · Jun 19, 2023 · e061bb6 · e061bb6
2 parents a39763d + 903209e
commit e061bb6
Show file tree

Hide file tree

Showing 15 changed files with 237 additions and 33 deletions.
diff --git a/app/frontend/src/components/Answer/Answer.tsx b/app/frontend/src/components/Answer/Answer.tsx
@@ -10,6 +10,7 @@ import styles from "./Answer.module.css";
 import { AskResponse, getCitationFilePath } from "../../api";
 import { parseAnswerToHtml } from "./AnswerParser";
 import { AnswerIcon } from "./AnswerIcon";
+import { RAIPanel } from "../RAIPanel";
 
 interface Props {
     answer: AskResponse;
@@ -19,6 +20,7 @@ interface Props {
     onSupportingContentClicked: () => void;
     onFollowupQuestionClicked?: (question: string) => void;
     showFollowupQuestions?: boolean;
+    onAdjustClick?: () => void;
 }
 
 export const Answer = ({
@@ -28,7 +30,8 @@ export const Answer = ({
     onThoughtProcessClicked,
     onSupportingContentClicked,
     onFollowupQuestionClicked,
-    showFollowupQuestions
+    showFollowupQuestions,
+    onAdjustClick
 }: Props) => {
     const parsedAnswer = useMemo(() => parseAnswerToHtml(answer.answer, answer.citation_lookup, onCitationClicked), [answer]);
 
@@ -94,6 +97,9 @@ export const Answer = ({
                     </Stack>
                 </Stack.Item>
             )}
+            <Stack.Item align="center">
+                <RAIPanel onAdjustClick={onAdjustClick}/>
+            </Stack.Item>
         </Stack>
     );
 };
diff --git a/app/frontend/src/components/ClearChatButton/ClearChatButton.tsx b/app/frontend/src/components/ClearChatButton/ClearChatButton.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 import { Text } from "@fluentui/react";
-import { Delete24Regular } from "@fluentui/react-icons";
+import { Broom24Regular } from "@fluentui/react-icons";
 
 import styles from "./ClearChatButton.module.css";
 
@@ -15,7 +15,7 @@ interface Props {
 export const ClearChatButton = ({ className, disabled, onClick }: Props) => {
     return (
         <div className={`${styles.container} ${className ?? ""} ${disabled && styles.disabled}`} onClick={onClick}>
-            <Delete24Regular />
+            <Broom24Regular />
             <Text>{"Clear chat"}</Text>
         </div>
     );

diff --git a/app/frontend/src/components/Example/Example.module.css b/app/frontend/src/components/Example/Example.module.css
@@ -29,9 +29,9 @@
 
 .exampleText {
     margin: 0;
-    font-size: 22px;
+    font-size: 21px;
     width: 280px;
-    height: 100px;
+    height: 90px;
 }
 
 @media only screen and (max-height: 780px) {

diff --git a/app/frontend/src/components/QuestionInput/QuestionInput.module.css b/app/frontend/src/components/QuestionInput/QuestionInput.module.css
@@ -6,7 +6,10 @@
     box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
     height: 90px;
     width: 100%;
-    padding: 15px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    padding-right: 15px;
+    padding-left: 3px;
     background: white;
 }
 
@@ -28,3 +31,30 @@
 .questionInputSendButtonDisabled {
     opacity: 0.4;
 }
+
+.questionClearButtonsContainer {
+    height: 100%;
+    vertical-align: middle;
+    padding-top: 5px;
+}
+
+.questionClearChatButton {
+    display: flex;
+    width: 50px;
+    height: 50px; 
+    cursor: pointer;
+    border: 2px solid rgba(140,140,140,1);
+    -webkit-border-radius: 50px;
+    border-radius: 50px;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    background: rgb(125,125,125);
+    padding-left: -12px;
+    justify-content: center;
+    align-items: center;
+}
+
+.questionClearChatButton:hover {
+    width: 120px;
+    color: lightgrey;
+}
diff --git a/app/frontend/src/components/QuestionInput/QuestionInput.tsx b/app/frontend/src/components/QuestionInput/QuestionInput.tsx
@@ -3,18 +3,23 @@
 
 import { useState } from "react";
 import { Stack, TextField } from "@fluentui/react";
-import { Send28Filled } from "@fluentui/react-icons";
+import { Send28Filled, Broom28Filled } from "@fluentui/react-icons";
+import { RAIPanel } from "../RAIPanel";
 
 import styles from "./QuestionInput.module.css";
+import { Button } from "react-bootstrap";
 
 interface Props {
     onSend: (question: string) => void;
     disabled: boolean;
     placeholder?: string;
     clearOnSend?: boolean;
+    onAdjustClick?: () => void;
+    showClearChat?: boolean;
+    onClearClick?: () => void;
 }
 
-export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend }: Props) => {
+export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend, onAdjustClick, showClearChat, onClearClick }: Props) => {
     const [question, setQuestion] = useState<string>("");
 
     const sendQuestion = () => {
@@ -46,27 +51,59 @@ export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend }: Pr
 
     const sendQuestionDisabled = disabled || !question.trim();
 
+    const [clearChatTextEnabled, setClearChatTextEnable] = useState<boolean>(true); 
+
+    const onMouseEnter = () => {
+        setClearChatTextEnable(false);
+    }
+
+    const onMouseLeave = () => {
+        setClearChatTextEnable(true);
+    }
+
     return (
-        <Stack horizontal className={styles.questionInputContainer}>
-            <TextField
-                className={styles.questionInputTextArea}
-                placeholder={placeholder}
-                multiline
-                resizable={false}
-                borderless
-                value={question}
-                onChange={onQuestionChange}
-                onKeyDown={onEnterPress}
-            />
-            <div className={styles.questionInputButtonsContainer}>
-                <div
-                    className={`${styles.questionInputSendButton} ${sendQuestionDisabled ? styles.questionInputSendButtonDisabled : ""}`}
-                    aria-label="Ask question button"
-                    onClick={sendQuestion}
-                >
-                    <Send28Filled primaryFill="rgba(115, 118, 225, 1)" />
+        <Stack>
+            <Stack.Item>
+            <Stack horizontal className={styles.questionInputContainer}>
+                {showClearChat ? (
+                    <div className={styles.questionClearButtonsContainer}>
+                        <div
+                            className={styles.questionClearChatButton}
+                            aria-label="Clear chat button"
+                            onClick={onClearClick}
+                            onMouseEnter={onMouseEnter}
+                            onMouseLeave={onMouseLeave}
+                        >
+                            <Broom28Filled primaryFill="rgba(255, 255, 255, 1)" />
+                            <span id={"test"} hidden={clearChatTextEnabled}>Clear Chat</span>
+                        </div>
+                    </div>
+                )
+                : null}
+                <TextField
+                    className={styles.questionInputTextArea}
+                    placeholder={placeholder}
+                    multiline
+                    resizable={false}
+                    borderless
+                    value={question}
+                    onChange={onQuestionChange}
+                    onKeyDown={onEnterPress}
+                />
+                <div className={styles.questionInputButtonsContainer}>
+                    <div
+                        className={`${styles.questionInputSendButton} ${sendQuestionDisabled ? styles.questionInputSendButtonDisabled : ""}`}
+                        aria-label="Ask question button"
+                        onClick={sendQuestion}
+                    >
+                        <Send28Filled primaryFill="rgba(115, 118, 225, 1)" />
+                    </div>
                 </div>
-            </div>
+            </Stack>
+            </Stack.Item>
+            <Stack.Item align="center">
+                <RAIPanel onAdjustClick={onAdjustClick} />
+            </Stack.Item>
         </Stack>
     );
 };
diff --git a/app/frontend/src/components/RAIPanel/RAIPanel.module.css b/app/frontend/src/components/RAIPanel/RAIPanel.module.css
@@ -0,0 +1,19 @@
+/* Copyright (c) Microsoft Corporation.
+   Licensed under the MIT license. */
+
+.adjustInput {
+    padding: 6px;
+    cursor: pointer;
+}
+
+.adjustInputText {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgb(133, 133, 133);
+    line-height: 22px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 8px;
+    padding-right: 8px;
+    white-space: pre-line;
+}
diff --git a/app/frontend/src/components/RAIPanel/RAIPanel.tsx b/app/frontend/src/components/RAIPanel/RAIPanel.tsx
@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { Options16Filled } from "@fluentui/react-icons";
+
+import styles from "./RAIPanel.module.css";
+
+interface Props {
+    onAdjustClick?: () => void;
+}
+
+export const RAIPanel = ({ onAdjustClick }: Props) => {
+
+    return (
+        <div className={styles.adjustInput} onClick={onAdjustClick}>
+            <Options16Filled primaryFill="rgba(133, 133, 133, 1)" />
+            <span className={styles.adjustInputText}>Adjust</span>
+        </div>
+    );
+};
diff --git a/app/frontend/src/components/RAIPanel/index.tsx b/app/frontend/src/components/RAIPanel/index.tsx
@@ -0,0 +1,4 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+export * from "./RAIPanel";
diff --git a/app/frontend/src/components/SettingsButton/SettingsButton.tsx b/app/frontend/src/components/SettingsButton/SettingsButton.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 import { Text } from "@fluentui/react";
-import { Settings24Regular } from "@fluentui/react-icons";
+import { Options24Filled } from "@fluentui/react-icons";
 
 import styles from "./SettingsButton.module.css";
 
@@ -14,8 +14,8 @@ interface Props {
 export const SettingsButton = ({ className, onClick }: Props) => {
     return (
         <div className={`${styles.container} ${className ?? ""}`} onClick={onClick}>
-            <Settings24Regular />
-            <Text>{"Developer settings"}</Text>
+            <Options24Filled />
+            <Text>{"Adjust"}</Text>
         </div>
     );
 };
diff --git a/app/frontend/src/pages/chat/Chat.module.css b/app/frontend/src/pages/chat/Chat.module.css
@@ -28,14 +28,25 @@
     justify-content: center;
     align-items: center;
     max-height: 1024px;
-    padding-top: 60px;
+    padding-top: 10px;
 }
 
 .chatEmptyStateTitle {
     font-size: 4rem;
     font-weight: 600;
     margin-top: 0;
-    margin-bottom: 30px;
+    margin-bottom: 10px;
+}
+
+.chatEmptyObjectives {
+    padding-left: 120px;
+    padding-right: 120px;
+    text-align: center;
+    font-size: 14px;
+}
+
+.chatEmptyObjectivesList {
+    font-size: 14px;
 }
 
 .chatEmptyStateSubtitle {

diff --git a/app/frontend/src/pages/chat/Chat.tsx b/app/frontend/src/pages/chat/Chat.tsx
@@ -245,6 +245,23 @@ const Chat = () => {
                         <div className={styles.chatEmptyState}>
                             <SparkleFilled fontSize={"120px"} primaryFill={"rgba(115, 118, 225, 1)"} aria-hidden="true" aria-label="Chat logo" />
                             <h1 className={styles.chatEmptyStateTitle}>Have a conversation with your private data</h1>
+                            <span className={styles.chatEmptyObjectives}>
+                                The objective of the Information Assistant powered by Azure OpenAI is to leverage a combination of AI components 
+                                to enable you to <b>Chat</b> (Have a conversation) with or <b>Ask a question</b> of your own private data. You can use our <b>Upload</b> feature to begin adding your private data now. The Information Assistant attempts to provide responses that are:
+                            </span>
+                            <ul className={styles.chatEmptyObjectivesList}>
+                                <li>Current: Based on the latest “up to date” information in your private data</li>
+                                <li>Relevant: Responses should leverage your private data</li>
+                                <li>Controlled: You can use the <b>Adjust</b> feature to control the response parameters</li>
+                                <li>Referenced: Responses should include specific citations</li>
+                                <li>Personalized: Responses should be tailored to your personal settings you <b>Adjust</b> to</li>
+                                <li>Explainable: Each response should include details on the <b>Thought Process</b> that was used</li>
+                            </ul>
+                            <span className={styles.chatEmptyObjectives}>
+                                <i>Though the Accelerator is focused on the key areas above, human oversight to confirm accuracy is crucial. 
+                                All responses from the system must be verified with the citations provided. 
+                                The responses are only as accurate as the data provided.</i>
+                            </span>
                             <h2 className={styles.chatEmptyStateSubtitle}>Ask anything or try an example</h2>
                             <ExampleList onExampleClicked={onExampleClicked} />
                         </div>
@@ -263,6 +280,7 @@ const Chat = () => {
                                             onSupportingContentClicked={() => onToggleTab(AnalysisPanelTabs.SupportingContentTab, index)}
                                             onFollowupQuestionClicked={q => makeApiRequest(q)}
                                             showFollowupQuestions={useSuggestFollowupQuestions && answers.length - 1 === index}
+                                            onAdjustClick={() => setIsConfigPanelOpen(!isConfigPanelOpen)}
                                         />
                                     </div>
                                 </div>
@@ -293,6 +311,9 @@ const Chat = () => {
                             placeholder="Type a new question (e.g. Who are Microsoft's top executives, provided as a table?)"
                             disabled={isLoading}
                             onSend={question => makeApiRequest(question)}
+                            onAdjustClick={() => setIsConfigPanelOpen(!isConfigPanelOpen)}
+                            showClearChat={true}
+                            onClearClick={clearChat}
                         />
                     </div>
                 </div>

diff --git a/app/frontend/src/pages/layout/Layout.module.css b/app/frontend/src/pages/layout/Layout.module.css
@@ -79,3 +79,24 @@
 .githubLogo {
     height: 20px;
 }
+
+.raibanner {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    background-color: rgb(242, 242, 242);
+    height: fit-content;
+    -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3) ;
+    box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3) ;
+    opacity: 25.0;
+}
+
+.raiwarning {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgb(133, 133, 133);
+    line-height: 22px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    white-space: pre-line;
+}
diff --git a/app/frontend/src/pages/layout/Layout.tsx b/app/frontend/src/pages/layout/Layout.tsx
@@ -37,6 +37,9 @@ const Layout = () => {
                     </nav>
                 </div>
             </header>
+            <div className={styles.raibanner}>
+                        <span className={styles.raiwarning}>AI-generated content may be incorrect</span>
+            </div>
 
             <Outlet />
         </div>