Frevagpt

.eslintrc

@@ -125,6 +125,10 @@
       {
         "allowAllPropertiesOnSameLine": true
       }
+    ],
+    "curly": [
+      "warn",
+      "all"
     ]
   }
 }

Makefile

@@ -4,6 +4,8 @@ export EVALUATION_SYSTEM_CONFIG_FILE := $(PWD)/docker/local-eval-system.conf
 export EVALUATION_SYSTEM_DRS_CONFIG_FILE := $(PWD)/docker/drs_config.toml
 export DJANGO_SUPERUSER_PASSWORD := secret
 export DEV_MODE := 1
+export CHAT_BOT := 1
+export COLUMNS=250
 export DOCKER_ENV_FILE ?= .env
 include $(DOCKER_ENV_FILE)
 export

assets/js/Containers/Databrowser/index.js

@@ -142,7 +142,10 @@ class Databrowser extends React.Component {
 
     return primaryFacets.map((key) => {
       const value = facets[key];
-      if (!value) return undefined;
+      if (!value) {
+        return undefined;
+      }
+
       return (
         <FacetPanel
           value={value}
@@ -169,7 +172,10 @@ class Databrowser extends React.Component {
       })
       .map((key) => {
         const value = facets[key];
-        if (!value) return undefined;
+        if (!value) {
+          return undefined;
+        }
+
         return (
           <FacetPanel
             value={value}

assets/js/Containers/FrevaGPT/actions.js

@@ -0,0 +1,22 @@
+import * as constants from "./constants";
+
+export function setThread(thread_id) {
+  return {
+    type: "SET_THREAD",
+    payload: thread_id,
+  };
+}
+
+export function setConversation(conversation) {
+  return {
+    type: "SET_CONVERSATION",
+    payload: conversation,
+  };
+}
+
+export const addElement = (element) => (dispatch) => {
+  dispatch({
+    type: constants.ADD_ELEMENT,
+    payload: element,
+  });
+};

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

@@ -0,0 +1,139 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+
+import { Col, Card } from "react-bootstrap";
+
+import { isEmpty } from "lodash";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import { replaceLinebreaks } from "../utils";
+
+import * as constants from "../constants";
+
+import CodeBlock from "./CodeBlock";
+
+class ChatBlock extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.renderImage = this.renderImage.bind(this);
+    this.renderCode = this.renderCode.bind(this);
+    this.renderUser = this.renderUser.bind(this);
+    this.renderError = this.renderError.bind(this);
+    this.renderDefault = this.renderDefault.bind(this);
+  }
+
+  renderImage(element) {
+    return (
+      <Col key={element.content} md={constants.BOT_COLUMN_STYLE}>
+        <img
+          className="w-100"
+          src={`data:image/jpeg;base64,${element.content}`}
+        />
+      </Col>
+    );
+  }
+
+  renderCode(element) {
+    if (isEmpty(element.content[0])) {
+      return null;
+    } else {
+      return (
+        <Col md={constants.BOT_COLUMN_STYLE} key={element.content}>
+          <CodeBlock title={element.variant} code={element.content} />
+        </Col>
+      );
+    }
+  }
+
+  renderUser(element) {
+    return (
+      <Col md={{ span: 10, offset: 2 }} key={element.content}>
+        <Card
+          className="shadow-sm card-body border-0 border-bottom mb-3"
+          style={{ backgroundColor: "#eee" }}
+        >
+          {element.content}
+        </Card>
+      </Col>
+    );
+  }
+
+  renderError(element) {
+    return (
+      <Col md={constants.BOT_COLUMN_STYLE} key={element.content}>
+        <Card className="shadow-sm card-body border-0 border-bottom mb-3 bg-danger">
+          <span className="fw-bold">{element.variant}</span>
+          <ReactMarkdown>{replaceLinebreaks(element.content)}</ReactMarkdown>
+        </Card>
+      </Col>
+    );
+  }
+
+  renderDefault(element) {
+    return (
+      <Col md={constants.BOT_COLUMN_STYLE} key={element.content}>
+        <Card className="shadow-sm card-body border-0 border-bottom mb-3 bg-light">
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+            {replaceLinebreaks(element.content)}
+          </ReactMarkdown>
+        </Card>
+      </Col>
+    );
+  }
+
+  renderChatComponents(element) {
+    switch (element.variant) {
+      case "ServerHint":
+      case "StreamEnd":
+        return null;
+      case "Image":
+        return this.renderImage(element);
+
+      case "Code":
+      case "CodeOutput":
+        return this.renderCode(element);
+
+      case "User":
+        return this.renderUser(element);
+
+      case "ServerError":
+      case "OpenAIError":
+      case "CodeError":
+      case "FrontendError":
+      case "UserStop":
+        return this.renderError(element);
+
+      default:
+        return this.renderDefault(element);
+    }
+  }
+
+  render() {
+    const { conversation } = this.props.chatBlock;
+
+    return (
+      <Col>
+        {conversation.map((element) => {
+          return this.renderChatComponents(element);
+        })}
+      </Col>
+    );
+  }
+}
+
+ChatBlock.propTypes = {
+  chatBlock: PropTypes.shape({
+    thread: PropTypes.string,
+    conversation: PropTypes.array,
+  }),
+};
+
+const mapStateToProps = (state) => ({
+  chatBlock: state.frevaGPTReducer,
+});
+
+export default connect(mapStateToProps)(ChatBlock);

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { Accordion } from "react-bootstrap";
+
+import PropTypes from "prop-types";
+
+import Highlight from "react-highlight";
+import "highlight.js/styles/atom-one-light.css";
+
+import { formatCode } from "../utils";
+
+function CodeBlock(props) {
+  return (
+    <div className="mb-3">
+      <Accordion defaultActiveKey="0">
+        <Accordion.Item eventKey="0">
+          <Accordion.Header>python</Accordion.Header>
+          <Accordion.Body>
+            <Highlight className="python">
+              {formatCode(props.title, props.code[0])}
+            </Highlight>
+          </Accordion.Body>
+        </Accordion.Item>
+      </Accordion>
+    </div>
+  );
+}
+
+CodeBlock.propTypes = {
+  code: PropTypes.array,
+  title: PropTypes.string,
+};
+
+export default CodeBlock;

assets/js/Containers/FrevaGPT/components/PendingAnswerComponent.js

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+
+import { Col, Card, Spinner, Accordion, Row } from "react-bootstrap";
+
+import Markdown from "react-markdown";
+
+import Highlight from "react-highlight";
+import "highlight.js/styles/atom-one-light.css";
+
+import * as constants from "../constants";
+
+function PendingAnswerComponent(props) {
+  const [renderedCode, setRenderedCode] = useState("");
+
+  useEffect(() => {
+    const parsedCode = renderCode(props.content);
+    if (parsedCode !== "") {
+      setRenderedCode(parsedCode);
+    }
+  }, [props.content]);
+
+  function renderCode(rawCode) {
+    let jsonCode = "";
+    let codeSnippets = "";
+
+    if (!rawCode.endsWith('"}')) {
+      jsonCode = rawCode + '"}';
+    } else {
+      jsonCode = rawCode;
+    }
+
+    try {
+      const code = JSON.parse(jsonCode);
+      codeSnippets = code.code;
+    } catch (err) {
+      // console.error(err);
+    }
+    return codeSnippets;
+  }
+
+  function renderAnswer(props) {
+    switch (props.variant) {
+      case "Assistant":
+        return (
+          <Col md={constants.BOT_COLUMN_STYLE}>
+            <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={constants.BOT_COLUMN_STYLE}>
+            <div className="mb-3">
+              <Accordion defaultActiveKey="0">
+                <Accordion.Item eventKey="0">
+                  <Accordion.Header>python</Accordion.Header>
+                  <Accordion.Body>
+                    <Highlight className="python">{renderedCode}</Highlight>
+                    <span>
+                      <Spinner size="sm" />
+                      <span className="m-2">Analyzing...</span>
+                    </span>
+                  </Accordion.Body>
+                </Accordion.Item>
+              </Accordion>
+            </div>
+          </Col>
+        );
+      case "ServerHint":
+        return (
+          <Row className="mb-3">
+            <Col md={1}>
+              <Spinner />
+            </Col>
+          </Row>
+        );
+      default:
+        return null;
+    }
+  }
+
+  return renderAnswer(props);
+}
+
+PendingAnswerComponent.propTypes = {
+  content: PropTypes.string,
+  variant: PropTypes.string,
+};
+
+export default PendingAnswerComponent;

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

@@ -0,0 +1,63 @@
+import React from "react";
+import { Card } from "react-bootstrap";
+
+import { browserHistory } from "react-router";
+
+import { botRequests } from "../exampleRequests";
+
+function SidePanel() {
+  function changeToThread(thread) {
+    browserHistory.push({
+      pathname: "/chatbot/",
+      search: `?thread_id=${thread}`,
+    });
+  }
+
+  return (
+    <div>
+      <Card className="mb-3 shadow-sm">
+        <div className="btn btn-outline-secondary border-0 p-3 rounded-top text-start card-header shadow-sm button-div">
+          General requests
+        </div>
+        <div className="p-3 py-2 collapse show">
+          {botRequests.general.map((element) => {
+            return (
+              <div key={element.thread}>
+                <a
+                  className="text-wrap"
+                  href=""
+                  onClick={() => changeToThread(element.thread)}
+                >
+                  {element.title}
+                </a>
+              </div>
+            );
+          })}
+        </div>
+      </Card>
+
+      <Card className="mb-3 shadow-sm">
+        <div className="btn btn-outline-secondary border-0 p-3 rounded-top text-start card-header shadow-sm button-div">
+          Freva requests
+        </div>
+        <div className="p-3 py-2 collapse show">
+          {botRequests.freva.map((element) => {
+            return (
+              <div key={element.thread}>
+                <a
+                  className="text-wrap"
+                  href=""
+                  onClick={() => changeToThread(element.thread)}
+                >
+                  {element.title}
+                </a>
+              </div>
+            );
+          })}
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+export default SidePanel;