Updated styling, removed logging

samples/react-chat-gpt/README.md

@@ -4,6 +4,8 @@
 
 This webpart uses Chat GPT in an SPFx webpart. You can ask questions from the web part and you will see the answers, most recent answers first.
 
+![Example animated screen](assets/chatgpt.gif)
+
 ![Example loading screen](assets/example.png)
 
 ![Example screen](assets/example2.png)

samples/react-chat-gpt/src/webparts/chatgpt/components/Chatgpt.module.scss

@@ -10,6 +10,23 @@
   }
 }
 
+.container {
+  border: 1px solid grey;
+  padding: 25px 35px;
+  margin-top: 20px;
+  border-width: 3px;
+  border-style: solid;
+  border-image: linear-gradient( to bottom, "[theme: themePrimary, default: #03787c]", rgba(0, 0, 0, 0) ) 1 100%;
+}
+
+.questionContainer {
+  display: flex;
+}
+
+.answerContainer{
+  display: flex
+}
+
 button {
   margin-right: 10px;
 }
@@ -28,13 +45,24 @@ button {
 }
 
 .question {
-  background-color: lightgray;
+  background-color: "[theme: themePrimary, default: #03787c]";
+  color: white;
   padding: 20px;
-  margin-top: 5px;
+  border-radius: 1.125rem 1.125rem 1.125rem 0;
+  margin-bottom: 8px;
+}
+
+.answer {
+  background-color: #d2d2d2;
+  color: black;
+  padding: 20px;
+  border-radius: 1.125rem 1.125rem 0 1.125rem;
+  margin-bottom: 8px;
+  margin-left: 25%;
 }
 
 .loadingContainer {
-  min-height: 90px
+  height: 90px
 }
 
 .loader {
@@ -46,7 +74,7 @@ button {
 .loader > div {
   width: 20px;
   height: 20px;
-  background: #03787c;
+  background: "[theme: themePrimary, default: #03787c]";
   border-radius: 50%;
   margin : 3px;
   animation: loader 0.6s infinite alternate;
@@ -61,6 +89,6 @@ button {
   to {
     opacity: 0.1;
     transform: translate(0, -20px);
-    background : rgb(90, 90, 90);
+    background : "[theme: themeSecondary, default: #5a5a5a]";
   }
 }

samples/react-chat-gpt/src/webparts/chatgpt/components/Chatgpt.tsx

@@ -26,7 +26,6 @@ export default class Chatgpt extends React.Component<IChatgptProps, IChatgptStat
       apiKey: this.props.apiKey,
     });
     Chatgpt.openai = new OpenAIApi(key);
-    console.log(Chatgpt.openai);
   }
 
   private updateQuestion(value: string): void{
@@ -34,8 +33,6 @@ export default class Chatgpt extends React.Component<IChatgptProps, IChatgptStat
   }
 
   private async askQuestion(): Promise<void>{
-    console.log(Chatgpt.openai);
-    console.log(this.state);
     const currentQuestion = this.state.currentQuestion;
     this.setState({
       loading: true,
@@ -47,11 +44,9 @@ export default class Chatgpt extends React.Component<IChatgptProps, IChatgptStat
       max_tokens: 2048
     });
 
-    console.log(response.data);
-    console.log(response.data.choices[0].text);
     const chatgpt: IChatgpt = {
       question: currentQuestion,
-      answer: response.data.choices[0].text
+      answer: response.data.choices[0].text.replace('\n\n','')
     }
 
     const oldChatgpt = this.state.chatgpt;
@@ -86,18 +81,24 @@ export default class Chatgpt extends React.Component<IChatgptProps, IChatgptStat
           <TextField className={styles.textfield} label="Question: " onChange={((event,newValue) => this.updateQuestion(newValue))} value={this.state.currentQuestion}/>
           <PrimaryButton text='Ask ChatGPT' onClick={this.askQuestion.bind(this)}/>
           <PrimaryButton text='Clear answers' onClick={this.clearAnswers.bind(this)}/>
-          <section className="loadingContainer">
+          <section className={styles.loadingContainer}>
             {this.state.loading && <div className={styles.loader}>
               <div/>
               <div/>
               <div/>
             </div>}
           </section>
+          <section className={styles.container}>
           {chatgpt.map((chatgpt, key) => {return <section key={key}>
+            <section className={styles.questionContainer}>
               <section className={styles.question}>{chatgpt.question}</section>
-              <Interweave content={chatgpt.answer}/>
+            </section>
+            <section className={styles.answerContainer}>
+              <Interweave className={styles.answer} content={chatgpt.answer}/>
+            </section>
             </section>}
           )}
+          </section>
         </section>}
       </section>
     );