adding copy to clipboard feature

oracle-devrel · Sep 6, 2024 · a65c4f8 · a65c4f8
1 parent a803e3f
commit a65c4f8
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 10 deletions.
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;
 }