adding copy to clipboard feature

jabrock · jabrock · commit a65c4f8b7453 · 2024-09-06T08:59:50.000-07:00
diff --git a/app/src/components/content/settings.tsx b/app/src/components/content/settings.tsx
@@ -64,8 +64,8 @@ export const Settings = (props: Props) => {
         if (
           // model.capabilities.includes("FINE_TUNE") &&
           model.capabilities.includes("TEXT_GENERATION") &&
-          model.vendor == "cohere" &&
-          model.version > 15
+          (model.vendor == "cohere" || model.vendor == "") &&
+          model.version != "14.2"
         )
           return model;
       });
diff --git a/app/src/components/content/stomp-interface.tsx b/app/src/components/content/stomp-interface.tsx
@@ -15,6 +15,9 @@ export const InitStomp = (
       ? "localhost:8080"
       : window.location.hostname;
   const serviceURL = `${protocol}${hostname}/websocket`;
+  let snippets: Array<string> = [];
+  let codesnipIdx = 0;
+
   console.log("in the stomp init module");
   const client = new Client({
     brokerURL: serviceURL,
@@ -44,6 +47,58 @@ export const InitStomp = (
   });
   client.activate();
 
+  const getIdxs = (searchTxt: string, data: string) => {
+    let idx = 0;
+    let tempArray = [];
+    while (idx !== -1) {
+      idx = data.indexOf(searchTxt, idx + 1);
+      tempArray.push(idx);
+    }
+    return tempArray;
+  };
+
+  const getCodeSnippets = (indexes: Array<number>, data: string) => {
+    let i = 0;
+    snippets = [];
+    while (i < indexes.length - 1 && indexes[0] !== -1) {
+      let tempStr = data.substring(indexes[i], indexes[i + 1]);
+      let langLen = tempStr.indexOf("\n");
+      let trimmed = tempStr.substring(langLen);
+      snippets.push(trimmed);
+      i += 2;
+    }
+    console.log("snippets: ", snippets);
+    console.log("codesnipIdx in getCodeSnippets: ", codesnipIdx);
+    return snippets;
+  };
+
+  const addButtons = () => {
+    setTimeout(() => {
+      const codeSections: HTMLCollectionOf<HTMLPreElement> =
+        document.getElementsByTagName("pre");
+      let x = 0;
+      for (let i = codesnipIdx; i < Array.from(codeSections).length; i++) {
+        let tempStr = JSON.stringify(snippets[x]);
+        let btn = document.createElement("button");
+        btn.setAttribute("id", "btn-" + codesnipIdx);
+        btn.setAttribute("onclick", "copytoclip(" + tempStr + ")");
+        // btn.setAttribute("class", "copy-to-clip-btn");
+        btn.innerText = "Copy";
+        btn.style.cssText = `position:relative;float:right`;
+        codeSections[codesnipIdx]?.prepend(btn);
+        console.log("codesnipIdx before increment in addButton: ", codesnipIdx);
+        codesnipIdx++;
+        x++;
+      }
+    }, 750);
+  };
+  const getClipboardOptions = (data: string) => {
+    const searchTxt = "```";
+    const indexes = getIdxs(searchTxt, data);
+    const snippets = getCodeSnippets(indexes, data);
+    return indexes[0] != -1 ? true : false;
+  };
+
   const onMessage = (msg: any) => {
     let aiAnswer = JSON.parse(msg.body).content;
     if (msg.data !== "connected") {
@@ -52,12 +107,14 @@ export const InitStomp = (
       setBusy(false);
       tempArray.pop();
       messagesDP.current.data = [];
+      const snipsExist = getClipboardOptions(aiAnswer);
       tempArray.push({
         id: tempArray.length as number,
         answer: aiAnswer,
       });
       chatData.current = tempArray;
       setUpdate(chatData.current);
+      snipsExist ? addButtons() : null;
     }
   };
   return client;
diff --git a/app/src/index.html b/app/src/index.html
@@ -49,16 +49,23 @@
     />
     <!-- This is where you would add any app specific styling -->
     <link rel="stylesheet" href="styles/app.css" type="text/css" />
+
+    <script type="text/javascript">
+      const copytoclip = (snip) => {
+        if (window.isSecureContext) {
+          if (snip) {
+            navigator.clipboard.writeText(snip);
+          }
+        } else {
+          console.log(
+            "Copy to clipboard requires a secure HTTP server (HTTPS) or localhost domain"
+          );
+        }
+      };
+    </script>
   </head>
 
-  <body
-    class="oj-web-applayout-body"
-    data-oj-binding-provider="none"
-  >
-  <!-- <body
-    class="oj-web-applayout-body oj-color-invert"
-    data-oj-binding-provider="none"
-  > -->
+  <body class="oj-web-applayout-body" data-oj-binding-provider="none">
     <app-root></app-root>
     <!-- This injects script tags for the main javascript files -->
     <!-- injector:scripts -->
diff --git a/app/src/styles/app.css b/app/src/styles/app.css
@@ -36,6 +36,18 @@ oj-sample-markdown-viewer .legacyStyling pre {
   color: black;
 }
 
+.copy-to-clip-btn {
+  position: relative;
+  border-bottom-left-radius: 5px;
+  border-width: thin;
+  padding: 5px;
+  float: right;
+  top: -10px;
+  right: -10px;
+  border-top: none;
+  border-right: none;
+}
+
 .demo-copy-paste {
   user-select: text;
 }
