From fd37b6c6935c16bb0217fda9df5449afc03b3856 Mon Sep 17 00:00:00 2001 From: Bianca Wentzel Date: Mon, 2 Sep 2024 19:06:05 +0200 Subject: [PATCH] Adapted to utilize Bootstrap --- assets/js/Containers/FrevaGPT/CodeBlock.js | 32 +++------ assets/js/Containers/FrevaGPT/index.js | 82 ++++++++-------------- 2 files changed, 42 insertions(+), 72 deletions(-) diff --git a/assets/js/Containers/FrevaGPT/CodeBlock.js b/assets/js/Containers/FrevaGPT/CodeBlock.js index f30868f3..84e878ac 100644 --- a/assets/js/Containers/FrevaGPT/CodeBlock.js +++ b/assets/js/Containers/FrevaGPT/CodeBlock.js @@ -1,26 +1,8 @@ import React from 'react'; +import { Card } from 'react-bootstrap'; import PropTypes from "prop-types"; -const CodeBlockStyle = { - block: { - backgroundColor: "#444", - borderRadius: "5px", - borderTop: "20px solid #666", - padding: "5px 5px 5px 15px", - color: "lightgray", - fontWeight: "bold", - fontFamily: "Consolas", - marginBottom: "10px" - }, - blockLanguage: { - backgroundColor: "lightgrey", - }, - codeLine: { - margin: "0px", - } -} - function formatCode(codeString) { const seperatedCode = codeString.split("\\n"); return seperatedCode; @@ -28,8 +10,16 @@ function formatCode(codeString) { function CodeBlock(props) { return( -
- {formatCode(props.code).map((element, index) => {return

{element}

})} +
+ + Code + + {formatCode(props.code).map((element, index) => { + return ({element}

); + } + )} +
+
); } diff --git a/assets/js/Containers/FrevaGPT/index.js b/assets/js/Containers/FrevaGPT/index.js index e4c1d0bd..6e99da8b 100644 --- a/assets/js/Containers/FrevaGPT/index.js +++ b/assets/js/Containers/FrevaGPT/index.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Container } from 'react-bootstrap'; +import { Container, Row, Col, FormControl, InputGroup, ListGroupItem } from 'react-bootstrap'; import JSONStream from 'JSONStream'; import Spinner from "../../Components/Spinner"; @@ -14,42 +14,6 @@ const ChatBot = () => { const [conversation, setConversation] = useState([]); const [answerLoading, setAnswerLoading] = useState(false); - const ChatBotStyle = { - botContainer: { - display: "flex", - flexDirection: "column", - }, - questionInput: { - width: "90%", - borderRadius: "10px", - border: ".1em solid lightgrey", - padding: "10px", - boxShadow: "0 .125rem .25rem rgba(0,0,0,.075)", - }, - questionButton: { - width: "8%", - padding: "10px", - borderRadius: "10px", - marginLeft: "20px", - boxShadow: "0 .125rem .25rem rgba(0,0,0,.075)", - }, - question: { - backgroundColor: "#aaa", - borderRadius: "10px", - padding: "10px", - boxShadow: "0 .125rem .25rem rgba(0,0,0,.075)", - listStyle: "none", - margin: "10px 0px 10px 100px", - }, - answer: { - backgroundColor: "#ccc", - borderRadius: "10px", - padding: "10px", - boxShadow: "0 .125rem .25rem rgba(0,0,0,.075)", - listStyle: "none", - margin: "10px 100px 10px 0px", - }, - } useEffect(() => { if (answer !== "") setConversation(prevConversation => [...prevConversation, {type: 'answer', content: answer}]) @@ -108,7 +72,6 @@ const ChatBot = () => { await fetchData(); } catch(error) { setAnswer('Failed to fetch streamresponse'); - console.log(error); } setAnswerLoading(false); } @@ -133,25 +96,42 @@ const ChatBot = () => { return ( -
-
    + + {conversation.map((element, index) => { if (element.type === 'code') { - return + return (); } else if (element.type === 'image') { return - } else { - return
  • {element.content}
  • } + } else { + return ( + + + {element.content} + + + ); } + } )} -
- {answerLoading ? () : null} - -
- - -
-
+ + + + {answerLoading ? () : null} + + + + + + + + + + +
); };