Data treaming

assets/js/Containers/FrevaGPT/components/AnswerComponent.js

@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Col, Card, Spinner } from "react-bootstrap";
+
+import Markdown from "react-markdown";
+
+function AnswerComponent(props) {
+  function renderAnswer(props) {
+    switch (props.variant) {
+      case "Assistant":
+        return (
+          <Col md={{ span: 10, offset: 0 }}>
+            <Card className="shadow-sm card-body border-0 border-bottom mb-3 bg-light">
+              <Markdown>{props.content}</Markdown>
+            </Card>
+          </Col>
+        );
+      case "Code":
+      case "CodeBlock":
+        return (
+          <Col md={{ offset: 0 }}>
+            <Card className="shadow-sm card-body border-0 border-bottom mb-3 bg-light">
+              <span>
+                <Spinner size="sm" />
+                Analyzing code...
+              </span>
+            </Card>
+          </Col>
+        );
+      default:
+        return null;
+    }
+  }
+
+  return <Col>{renderAnswer(props)}</Col>;
+}
+
+AnswerComponent.propTypes = {
+  content: PropTypes.string,
+  variant: PropTypes.string,
+};
+
+export default AnswerComponent;

assets/js/Containers/FrevaGPT/ChatBlock.js → assets/js/Containers/FrevaGPT/components/ChatBlock.js

@@ -9,9 +9,9 @@ import { isEmpty } from "lodash";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
-import CodeBlock from "./CodeBlock";
+import { replaceLinebreaks } from "../utils";
 
-import { replaceLinebreaks } from "./utils";
+import CodeBlock from "./CodeBlock";
 
 class ChatBlock extends React.Component {
   constructor(props) {
@@ -48,7 +48,7 @@ class ChatBlock extends React.Component {
   renderUser(element) {
     return (
       <Col md={{ span: 10, offset: 2 }} key={element.content}>
-        <Card className="shadow-sm card-body border-0 border-bottom mb-3 bg-info">
+        <Card className="shadow-sm card-body border-0 border-bottom mb-3 bg-secondary">
           {element.content}
         </Card>
       </Col>

assets/js/Containers/FrevaGPT/CodeBlock.js → assets/js/Containers/FrevaGPT/components/CodeBlock.js

@@ -6,7 +6,7 @@ import PropTypes from "prop-types";
 import Highlight from "react-highlight";
 import "highlight.js/styles/atom-one-light.css";
 
-import { formatCode } from "./utils";
+import { formatCode } from "../utils";
 
 function CodeBlock(props) {
   return (

assets/js/Containers/FrevaGPT/SidePanel.js → assets/js/Containers/FrevaGPT/components/SidePanel.js

@@ -3,7 +3,7 @@ import { Card } from "react-bootstrap";
 
 import { browserHistory } from "react-router";
 
-import { botRequests } from "./exampleRequests";
+import { botRequests } from "../exampleRequests";
 
 function SidePanel() {
   function changeToThread(thread) {

assets/js/Containers/FrevaGPT/index.js

@@ -20,8 +20,9 @@ import { isEmpty, has } from "lodash";
 
 import Spinner from "../../Components/Spinner";
 
-import ChatBlock from "./ChatBlock";
-import SidePanel from "./SidePanel";
+import ChatBlock from "./components/ChatBlock";
+import SidePanel from "./components/SidePanel";
+import AnswerComponent from "./components/AnswerComponent";
 
 import { objectToQueryString, truncate } from "./utils";
 
@@ -54,6 +55,8 @@ class FrevaGPT extends React.Component {
       hideBotModelList: true,
       botOkay: undefined,
       showSuggestions: true,
+      dynamicAnswer: "",
+      dynamicVariant: "",
     };
   }
 
@@ -171,7 +174,6 @@ class FrevaGPT extends React.Component {
     while (true) {
       // eslint-disable-next-line no-await-in-loop
       const { done, value } = await reader.read();
-      console.log('##', decoder.decode(value));
       if (done) break;
 
       const decodedValues = decoder.decode(value);
@@ -195,16 +197,27 @@ class FrevaGPT extends React.Component {
               // if object has not same variant, add answer to conversation and override object
               if (varObj.variant !== jsonBuffer.variant) {
                 this.props.dispatch(addElement(varObj));
+                this.setState({ dynamicAnswer: "", dynamicVariant: "" });
                 varObj = jsonBuffer;
               } else {
                 // if object has same variant, add content
                 // eslint-disable-next-line no-lonely-if
                 if (
                   varObj.variant === "Code" ||
                   varObj.variant === "CodeOutput"
-                )
+                ) {
                   varObj.content[0] = varObj.content[0] + jsonBuffer.content[0];
-                else varObj.content = varObj.content + jsonBuffer.content;
+                  this.setState({
+                    dynamicAnswer: varObj.content[0],
+                    dynamicVariant: varObj.variant,
+                  });
+                } else {
+                  varObj.content = varObj.content + jsonBuffer.content;
+                  this.setState({
+                    dynamicAnswer: varObj.content,
+                    dynamicVariant: varObj.variant,
+                  });
+                }
               }
             } else {
               // object is empty so add content
@@ -319,7 +332,12 @@ class FrevaGPT extends React.Component {
 
           <ChatBlock />
 
-          {this.state.loading ? (
+          <AnswerComponent
+            content={this.state.dynamicAnswer}
+            variant={this.state.dynamicVariant}
+          />
+
+          {this.state.loading && !this.state.dynamicAnswer ? (
             <Row className="mb-3">
               <Col md={1}>
                 <Spinner />

bot/proxyviews.py

@@ -1,11 +1,38 @@
 from urllib.parse import urljoin
 
+import requests
 from django.conf import settings
+from django.http import StreamingHttpResponse
+from django.views import View
 from djproxy.views import HttpProxy
 
 
-class ChatBotProxy(HttpProxy):
-    """A reverse proxy to forward requests to the databrowserAPI."""
+class ChatBotProxy(View):
+    def get(self, request, *args, **kwargs):
+        path = request.path
+        base_url = urljoin(settings.CHAT_BOT_URL, path)
+        params = request.GET.dict()
 
-    base_url = urljoin(settings.CHAT_BOT_URL, "/api/chatbot/")
-    reverse_urls = [("/api/chatbot/", settings.CHAT_BOT_URL)]
+        try:
+            upstream_response = requests.get(base_url[:-1], params=params, stream=True)
+            upstream_response.raise_for_status()
+        except requests.RequestException as e:
+            return StreamingHttpResponse(
+                f"Error while connecting to the external API: {str(e)}",
+                status=502,
+            )
+
+        # Stream the content of the external API to the Django response
+        def stream():
+            for chunk in upstream_response.iter_content(chunk_size=8192):
+                if chunk:
+                    yield chunk
+
+        response = StreamingHttpResponse(
+            stream(), content_type=upstream_response.headers.get("Content-Type")
+        )
+        response["Content-Disposition"] = upstream_response.headers.get(
+            "Content-Disposition", "inline"
+        )
+
+        return response

bot/views.py

@@ -42,6 +42,7 @@ def reverse_proxy(request, path):
             method="GET",
             url=api_url,
             params=all_parameters,
+            stream=True,  # Enable streaming
             timeout=100,
         )
         return response.content