chore: reorganize client files for docker

client/src/utils/fetchers.js

@@ -0,0 +1,30 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import axios from 'axios';
+import useSWR from 'swr';
+import useSWRMutation from 'swr/mutation';
+
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+const postRequest = async (url, { arg }) => {
+  return await axios.post(url, { arg });
+};
+
+export const swr = (path, successCallback) => {
+  const options = {};
+
+  if (successCallback) {
+    options.onSuccess = successCallback;
+  }
+
+  return useSWR(path, fetcher, options);
+}
+
+export default function manualSWR(path, type, successCallback) {
+  const options = {};
+
+  if (successCallback) {
+    options.onSuccess = successCallback;
+  }
+  const fetchFunction = type === 'get' ? fetcher : postRequest;
+  return useSWRMutation(path, fetchFunction, options);
+}

client/src/utils/handleSubmit.js

@@ -0,0 +1,66 @@
+import { SSE } from './sse';
+// const newLineRegex = /^\n+/;
+
+export default function handleSubmit({
+  model,
+  text,
+  convo,
+  messageHandler,
+  convoHandler,
+  errorHandler,
+  chatGptLabel,
+  promptPrefix
+}) {
+  const endpoint = `http://localhost:3080/ask`;
+  let payload = { model, text, chatGptLabel, promptPrefix };
+  if (convo.conversationId && convo.parentMessageId) {
+    payload = {
+      ...payload,
+      conversationId: convo.conversationId,
+      parentMessageId: convo.parentMessageId
+    };
+  }
+
+  if (model === 'bingai' && convo.conversationId) {
+    payload = {
+      ...payload,
+      conversationId: convo.conversationId,
+      conversationSignature: convo.conversationSignature,
+      clientId: convo.clientId,
+      invocationId: convo.invocationId,
+    };
+  }
+
+  const server = model === 'bingai' ? endpoint + '/bing' : endpoint;
+  const events = new SSE(server, {
+    payload: JSON.stringify(payload),
+    headers: { 'Content-Type': 'application/json' }
+  });
+
+  events.onopen = function () {
+    console.log('connection is opened');
+  };
+
+  events.onmessage = function (e) {
+    const data = JSON.parse(e.data);
+    let text = data.text || data.response;
+    if (data.message) {
+      messageHandler(text);
+    }
+
+    if (data.final) {
+      convoHandler(data);
+      console.log('final', data);
+    } else {
+      // console.log('dataStream', data);
+    }
+  };
+
+  events.onerror = function (e) {
+    console.log('error in opening conn.');
+    events.close();
+    errorHandler(e);
+  };
+
+  events.stream();
+}

client/src/utils/index.js

@@ -0,0 +1,44 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export const languages = [
+  'java',
+  'c',
+  'markdown',
+  'css',
+  'html',
+  'xml',
+  'bash',
+  'json',
+  'yaml',
+  'jsx',
+  'python',
+  'c++',
+  'javascript',
+  'csharp',
+  'php',
+  'typescript',
+  'swift',
+  'objectivec',
+  'sql',
+  'r',
+  'kotlin',
+  'ruby',
+  'go',
+  'x86asm',
+  'matlab',
+  'perl',
+  'pascal'
+];
+
+export const wrapperRegex = {
+  codeRegex: /(```[\s\S]*?```)/g,
+  inLineRegex: /(`[^`]+?`)/g,
+  markupRegex: /(`[^`]+?`)/g,
+  languageMatch: /^```(\w+)/,
+  newLineMatch: /^```(\n+)/
+};

client/src/utils/regexSplit.js

@@ -0,0 +1,46 @@
+const primaryRegex = /```([^`\n]*?)\n([\s\S]*?)\n```/g;
+const secondaryRegex = /```([^`\n]*?)\n?([\s\S]*?)\n?```/g;
+
+const unenclosedCodeTest = (text) => {
+  let workingText = text;
+  // if (workingText.startsWith('<') || (!workingText.startsWith('`') && workingText.match(/```/g)?.length === 1)) {
+  //   workingText = `\`\`\`${workingText}`
+  // }
+
+  return workingText.trim();
+};
+
+export default function regexSplit(string) {
+  let matches = [...string.matchAll(primaryRegex)];
+
+  if (!matches[0]) {
+    matches = [...string.matchAll(secondaryRegex)];
+  }
+
+  const output = [matches[0].input.slice(0, matches[0].index)];
+
+  // console.log(matches);
+
+  for (let i = 0; i < matches.length; i++) {
+    const [fullMatch, language, code] = matches[i];
+    // const formattedCode = code.replace(/`+/g, '\\`');
+    output.push(`\`\`\`${language}\n${code}\n\`\`\``);
+    if (i < matches.length - 1) {
+      let nextText = string.slice(matches[i].index + fullMatch.length, matches[i + 1].index);
+      nextText = unenclosedCodeTest(nextText);
+      output.push(nextText);
+    } else {
+      const lastMatch = matches[matches.length - 1][0];
+      // console.log(lastMatch);
+      // console.log(matches[0].input.split(lastMatch));
+      let rest = matches[0].input.split(lastMatch)[1]
+
+      if (rest) {
+        rest = unenclosedCodeTest(rest);
+        output.push(rest);
+      }
+    }
+  }
+
+  return output;
+}

client/src/utils/regexSplit.mjs

@@ -0,0 +1,46 @@
+const primaryRegex = /```([^`\n]*?)\n([\s\S]*?)\n```/g;
+const secondaryRegex = /```([^`\n]*?)\n?([\s\S]*?)\n?```/g;
+
+const unenclosedCodeTest = (text) => {
+  let workingText = text;
+  // if (workingText.startsWith('<') || (!workingText.startsWith('`') && workingText.match(/```/g)?.length === 1)) {
+  //   workingText = `\`\`\`${workingText}`
+  // }
+
+  return workingText.trim();
+};
+
+export default function regexSplit(string) {
+  let matches = [...string.matchAll(primaryRegex)];
+
+  if (!matches[0]) {
+    matches = [...string.matchAll(secondaryRegex)];
+  }
+
+  const output = [matches[0].input.slice(0, matches[0].index)];
+
+  // console.log(matches);
+
+  for (let i = 0; i < matches.length; i++) {
+    const [fullMatch, language, code] = matches[i];
+    // const formattedCode = code.replace(/`+/g, '\\`');
+    output.push(`\`\`\`${language}\n${code}\n\`\`\``);
+    if (i < matches.length - 1) {
+      let nextText = string.slice(matches[i].index + fullMatch.length, matches[i + 1].index);
+      nextText = unenclosedCodeTest(nextText);
+      output.push(nextText);
+    } else {
+      const lastMatch = matches[matches.length - 1][0];
+      // console.log(lastMatch);
+      // console.log(matches[0].input.split(lastMatch));
+      let rest = matches[0].input.split(lastMatch)[1]
+
+      if (rest) {
+        rest = unenclosedCodeTest(rest);
+        output.push(rest);
+      }
+    }
+  }
+
+  return output;
+}

client/src/utils/sse.js

@@ -0,0 +1,218 @@
+/**
+ * Copyright (C) 2016 Maxime Petazzoni <maxime.petazzoni@bulix.org>.
+ * All rights reserved.
+ */
+
+var SSE = function (url, options) {
+  if (!(this instanceof SSE)) {
+    return new SSE(url, options);
+  }
+
+  this.INITIALIZING = -1;
+  this.CONNECTING = 0;
+  this.OPEN = 1;
+  this.CLOSED = 2;
+
+  this.url = url;
+
+  options = options || {};
+  this.headers = options.headers || {};
+  this.payload = options.payload !== undefined ? options.payload : '';
+  this.method = options.method || (this.payload && 'POST' || 'GET');
+  this.withCredentials = !!options.withCredentials;
+
+  this.FIELD_SEPARATOR = ':';
+  this.listeners = {};
+
+  this.xhr = null;
+  this.readyState = this.INITIALIZING;
+  this.progress = 0;
+  this.chunk = '';
+
+  this.addEventListener = function(type, listener) {
+    if (this.listeners[type] === undefined) {
+      this.listeners[type] = [];
+    }
+
+    if (this.listeners[type].indexOf(listener) === -1) {
+      this.listeners[type].push(listener);
+    }
+  };
+
+  this.removeEventListener = function(type, listener) {
+    if (this.listeners[type] === undefined) {
+      return;
+    }
+
+    var filtered = [];
+    this.listeners[type].forEach(function(element) {
+      if (element !== listener) {
+        filtered.push(element);
+      }
+    });
+    if (filtered.length === 0) {
+      delete this.listeners[type];
+    } else {
+      this.listeners[type] = filtered;
+    }
+  };
+
+  this.dispatchEvent = function(e) {
+    if (!e) {
+      return true;
+    }
+
+    e.source = this;
+
+    var onHandler = 'on' + e.type;
+    if (this.hasOwnProperty(onHandler)) {
+      this[onHandler].call(this, e);
+      if (e.defaultPrevented) {
+        return false;
+      }
+    }
+
+    if (this.listeners[e.type]) {
+      return this.listeners[e.type].every(function(callback) {
+        callback(e);
+        return !e.defaultPrevented;
+      });
+    }
+
+    return true;
+  };
+
+  this._setReadyState = function(state) {
+    var event = new CustomEvent('readystatechange');
+    event.readyState = state;
+    this.readyState = state;
+    this.dispatchEvent(event);
+  };
+
+  this._onStreamFailure = function(e) {
+    var event = new CustomEvent('error');
+    event.data = e.currentTarget.response;
+    this.dispatchEvent(event);
+    this.close();
+  }
+
+  this._onStreamAbort = function(e) {
+    this.dispatchEvent(new CustomEvent('abort'));
+    this.close();
+  }
+
+  this._onStreamProgress = function(e) {
+    if (!this.xhr) {
+      return;
+    }
+
+    if (this.xhr.status !== 200) {
+      this._onStreamFailure(e);
+      return;
+    }
+
+    if (this.readyState == this.CONNECTING) {
+      this.dispatchEvent(new CustomEvent('open'));
+      this._setReadyState(this.OPEN);
+    }
+
+    var data = this.xhr.responseText.substring(this.progress);
+    this.progress += data.length;
+    data.split(/(\r\n|\r|\n){2}/g).forEach(function(part) {
+      if (part.trim().length === 0) {
+        this.dispatchEvent(this._parseEventChunk(this.chunk.trim()));
+        this.chunk = '';
+      } else {
+        this.chunk += part;
+      }
+    }.bind(this));
+  };
+
+  this._onStreamLoaded = function(e) {
+    this._onStreamProgress(e);
+
+    // Parse the last chunk.
+    this.dispatchEvent(this._parseEventChunk(this.chunk));
+    this.chunk = '';
+  };
+
+  /**
+   * Parse a received SSE event chunk into a constructed event object.
+   */
+  this._parseEventChunk = function(chunk) {
+    if (!chunk || chunk.length === 0) {
+      return null;
+    }
+
+    var e = {'id': null, 'retry': null, 'data': '', 'event': 'message'};
+    chunk.split(/\n|\r\n|\r/).forEach(function(line) {
+      line = line.trimRight();
+      var index = line.indexOf(this.FIELD_SEPARATOR);
+      if (index <= 0) {
+        // Line was either empty, or started with a separator and is a comment.
+        // Either way, ignore.
+        return;
+      }
+
+      var field = line.substring(0, index);
+      if (!(field in e)) {
+        return;
+      }
+
+      var value = line.substring(index + 1).trimLeft();
+      if (field === 'data') {
+        e[field] += value;
+      } else {
+        e[field] = value;
+      }
+    }.bind(this));
+
+    var event = new CustomEvent(e.event);
+    event.data = e.data;
+    event.id = e.id;
+    return event;
+  };
+
+  this._checkStreamClosed = function() {
+    if (!this.xhr) {
+      return;
+    }
+
+    if (this.xhr.readyState === XMLHttpRequest.DONE) {
+      this._setReadyState(this.CLOSED);
+    }
+  };
+
+  this.stream = function() {
+    this._setReadyState(this.CONNECTING);
+
+    this.xhr = new XMLHttpRequest();
+    this.xhr.addEventListener('progress', this._onStreamProgress.bind(this));
+    this.xhr.addEventListener('load', this._onStreamLoaded.bind(this));
+    this.xhr.addEventListener('readystatechange', this._checkStreamClosed.bind(this));
+    this.xhr.addEventListener('error', this._onStreamFailure.bind(this));
+    this.xhr.addEventListener('abort', this._onStreamAbort.bind(this));
+    this.xhr.open(this.method, this.url);
+    for (var header in this.headers) {
+      this.xhr.setRequestHeader(header, this.headers[header]);
+    }
+    this.xhr.withCredentials = this.withCredentials;
+    this.xhr.send(this.payload);
+  };
+
+  this.close = function() {
+    if (this.readyState === this.CLOSED) {
+      return;
+    }
+
+    this.xhr.abort();
+    this.xhr = null;
+    this._setReadyState(this.CLOSED);
+  };
+};
+
+// Export our SSE module for npm.js
+if (typeof exports !== 'undefined') {
+  // exports.SSE = SSE;
+  module.exports = { SSE };
+}