Merge pull request #181 from n4ze3m/next

v1.6.0
n4ze3m · Dec 30, 2023 · fe9a5f1 · fe9a5f1
2 parents 809e06c + 86c4992
commit fe9a5f1
Show file tree

Hide file tree

Showing 33 changed files with 970 additions and 258 deletions.
diff --git a/README.md b/README.md
@@ -138,6 +138,7 @@ and more...
 - [x] fireworks.ai's llama 2 models
 - [x] fireworks.ai's mistral
 - [X] Local AI models
+- [X] Ollama
 
 ### Embedding models
 

diff --git a/app/ui/README.md b/app/ui/README.md
@@ -0,0 +1,27 @@
+# Frontend
+
+This is the frontend of the dialoqbase project.
+
+## Setup
+
+### Install dependencies
+
+```bash
+npm install
+```
+
+### Setup environment variables
+
+Create a `.env` file in the root directory of the project and add the following variables:
+
+```bash
+cp .env.example .env
+```
+
+### Run the server
+
+```bash
+npm run dev
+```
+
+The server will be running on `http://localhost:5123`.
diff --git a/app/ui/package.json b/app/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "app",
   "private": true,
-  "version": "1.5.2",
+  "version": "1.6.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/app/ui/src/components/Common/Markdown.tsx b/app/ui/src/components/Common/Markdown.tsx
@@ -5,14 +5,16 @@ import rehypeMathjax from "rehype-mathjax";
 import remarkMath from "remark-math";
 // import remhypeMrmaid from "rehype-mermaidjs"
 import ReactMarkdown from "react-markdown";
-import { ClipboardIcon, CheckIcon } from "@heroicons/react/24/outline";
+import { ClipboardIcon, CheckIcon, EyeIcon } from "@heroicons/react/24/outline";
 import React from "react";
-import { Tooltip } from "antd";
+import { Modal, Tooltip } from "antd";
 import Mermaid from "./Mermaid";
 import { useMessage } from "../../hooks/useMessage";
 
 export default function Markdown({ message }: { message: string }) {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false);
+  const [isOpenHTML, setIsOpenHTML] = React.useState(false);
+  const [html, setHtml] = React.useState("");
 
   // const { isProcessing } = useMessage();
 
@@ -26,82 +28,114 @@ export default function Markdown({ message }: { message: string }) {
   const { isProcessing } = useMessage();
 
   return (
-    <ReactMarkdown
-      className="prose break-words dark:prose-invert text-sm prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
-      remarkPlugins={[remarkGfm, remarkMath]}
-      rehypePlugins={[rehypeMathjax]}
-      components={{
-        code({ node, inline, className, children, ...props }) {
-          // // if language is mermaid
-          if (className === "language-mermaid" && !isProcessing) {
-            return <Mermaid code={children[0] as string} />;
-          }
-          const match = /language-(\w+)/.exec(className || "");
-          return !inline ? (
-            <div className="code relative text-base bg-gray-800 rounded-md overflow-hidden">
-              <div className="flex items-center justify-between py-1.5 px-4">
-                <span className="text-xs lowercase text-gray-200">
-                  {className && className.replace("language-", "")}
-                </span>
+    <React.Fragment>
+      <ReactMarkdown
+        className="prose break-words dark:prose-invert text-sm prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[rehypeMathjax]}
+        components={{
+          code({ node, inline, className, children, ...props }) {
+            // // if language is mermaid
+            if (className === "language-mermaid" && !isProcessing) {
+              return <Mermaid code={children[0] as string} />;
+            }
+            const match = /language-(\w+)/.exec(className || "");
+            const isHTML = /language-html/.exec(className || "") !== null;
+            return !inline ? (
+              <div className="code relative text-base bg-gray-800 rounded-md overflow-hidden">
+                <div className="flex items-center justify-between py-1.5 px-4">
+                  <span className="text-xs lowercase text-gray-200">
+                    {className && className.replace("language-", "")}
+                  </span>
 
-                <div className="flex items-center">
-                  <Tooltip title="Copy to clipboard">
-                    <button
-                      onClick={() => {
-                        navigator.clipboard.writeText(children[0] as string);
-                        setIsBtnPressed(true);
-                      }}
-                      className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-200 hover:bg-gray-700 hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-100"
-                    >
-                      {!isBtnPressed ? (
-                        <ClipboardIcon className="h-4 w-4" />
-                      ) : (
-                        <CheckIcon className="h-4 w-4 text-green-400" />
-                      )}
-                    </button>
-                  </Tooltip>
+                  <div className="flex items-center">
+                    {isHTML && (
+                      <Tooltip title="Preview HTML">
+                        <button
+                          onClick={() => {
+                            setIsOpenHTML(true);
+                            setHtml(children[0] as string);
+                          }}
+                          className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-200 hover:bg-gray-700 hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                        >
+                          <EyeIcon className="h-4 w-4" />
+                        </button>
+                      </Tooltip>
+                    )}
+                    <Tooltip title="Copy to clipboard">
+                      <button
+                        onClick={() => {
+                          navigator.clipboard.writeText(children[0] as string);
+                          setIsBtnPressed(true);
+                        }}
+                        className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-200 hover:bg-gray-700 hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                      >
+                        {!isBtnPressed ? (
+                          <ClipboardIcon className="h-4 w-4" />
+                        ) : (
+                          <CheckIcon className="h-4 w-4 text-green-400" />
+                        )}
+                      </button>
+                    </Tooltip>
+                  </div>
                 </div>
+                <SyntaxHighlighter
+                  {...props}
+                  children={String(children).replace(/\n$/, "")}
+                  style={nightOwl}
+                  key={Math.random()}
+                  customStyle={{
+                    margin: 0,
+                    fontSize: "1rem",
+                    lineHeight: "1.5rem",
+                  }}
+                  language={(match && match[1]) || ""}
+                  codeTagProps={{
+                    className: "text-sm",
+                  }}
+                />
               </div>
-              <SyntaxHighlighter
+            ) : (
+              <code className={`${className} font-semibold`} {...props}>
+                {children}
+              </code>
+            );
+          },
+          a({ node, ...props }) {
+            return (
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-blue-500 text-sm hover:underline"
                 {...props}
-                children={String(children).replace(/\n$/, "")}
-                style={nightOwl}
-                key={Math.random()}
-                customStyle={{
-                  margin: 0,
-                  fontSize: "1rem",
-                  lineHeight: "1.5rem",
-                }}
-                language={(match && match[1]) || ""}
-                codeTagProps={{
-                  className: "text-sm",
-                }}
-              />
-            </div>
-          ) : (
-            <code className={`${className} font-semibold`} {...props}>
-              {children}
-            </code>
-          );
-        },
-        a({ node, ...props }) {
-          return (
-            <a
-              target="_blank"
-              rel="noreferrer"
-              className="text-blue-500 text-sm hover:underline"
-              {...props}
-            >
-              {props.children}
-            </a>
-          );
-        },
-        p({ children }) {
-          return <p className="mb-2 last:mb-0">{children}</p>;
-        },
-      }}
-    >
-      {message}
-    </ReactMarkdown>
+              >
+                {props.children}
+              </a>
+            );
+          },
+          p({ children }) {
+            return <p className="mb-2 last:mb-0">{children}</p>;
+          },
+        }}
+      >
+        {message}
+      </ReactMarkdown>
+
+      <Modal
+        open={isOpenHTML}
+        onCancel={() => setIsOpenHTML(false)}
+        footer={null}
+        width="90%"
+      >
+        <div className="p-6">
+        <iframe
+          srcDoc={html}
+          className="w-full"
+          title="Preview HTML"
+          height={window.innerHeight / 2 > 500 ? window.innerHeight / 2 : 500}
+        ></iframe>
+        </div>
+      </Modal>
+    </React.Fragment>
   );
 }