Skip to content

Commit 93688b3

Browse files
WSPlutaWSPluta
authored
Merge pull request #32 from oracle-devrel/copyToClipboard
adding copy to clipboard feature
2 parents f1281af + a65c4f8 commit 93688b3

File tree

4 files changed

+86
-10
lines changed

4 files changed

+86
-10
lines changed

‎app/src/components/content/settings.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ export const Settings = (props: Props) => {
6464
if (
6565
// model.capabilities.includes("FINE_TUNE") &&
6666
model.capabilities.includes("TEXT_GENERATION") &&
67-
model.vendor == "cohere" &&
68-
model.version > 15
67+
(model.vendor == "cohere" || model.vendor == "") &&
68+
model.version != "14.2"
6969
)
7070
return model;
7171
});

‎app/src/components/content/stomp-interface.tsx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ export const InitStomp = (
1515
? "localhost:8080"
1616
: window.location.hostname;
1717
const serviceURL = `${protocol}${hostname}/websocket`;
18+
let snippets: Array<string> = [];
19+
let codesnipIdx = 0;
20+
1821
console.log("in the stomp init module");
1922
const client = new Client({
2023
brokerURL: serviceURL,
@@ -44,6 +47,58 @@ export const InitStomp = (
4447
});
4548
client.activate();
4649

50+
const getIdxs = (searchTxt: string, data: string) => {
51+
let idx = 0;
52+
let tempArray = [];
53+
while (idx !== -1) {
54+
idx = data.indexOf(searchTxt, idx + 1);
55+
tempArray.push(idx);
56+
}
57+
return tempArray;
58+
};
59+
60+
const getCodeSnippets = (indexes: Array<number>, data: string) => {
61+
let i = 0;
62+
snippets = [];
63+
while (i < indexes.length - 1 && indexes[0] !== -1) {
64+
let tempStr = data.substring(indexes[i], indexes[i + 1]);
65+
let langLen = tempStr.indexOf("\n");
66+
let trimmed = tempStr.substring(langLen);
67+
snippets.push(trimmed);
68+
i += 2;
69+
}
70+
console.log("snippets: ", snippets);
71+
console.log("codesnipIdx in getCodeSnippets: ", codesnipIdx);
72+
return snippets;
73+
};
74+
75+
const addButtons = () => {
76+
setTimeout(() => {
77+
const codeSections: HTMLCollectionOf<HTMLPreElement> =
78+
document.getElementsByTagName("pre");
79+
let x = 0;
80+
for (let i = codesnipIdx; i < Array.from(codeSections).length; i++) {
81+
let tempStr = JSON.stringify(snippets[x]);
82+
let btn = document.createElement("button");
83+
btn.setAttribute("id", "btn-" + codesnipIdx);
84+
btn.setAttribute("onclick", "copytoclip(" + tempStr + ")");
85+
// btn.setAttribute("class", "copy-to-clip-btn");
86+
btn.innerText = "Copy";
87+
btn.style.cssText = `position:relative;float:right`;
88+
codeSections[codesnipIdx]?.prepend(btn);
89+
console.log("codesnipIdx before increment in addButton: ", codesnipIdx);
90+
codesnipIdx++;
91+
x++;
92+
}
93+
}, 750);
94+
};
95+
const getClipboardOptions = (data: string) => {
96+
const searchTxt = "```";
97+
const indexes = getIdxs(searchTxt, data);
98+
const snippets = getCodeSnippets(indexes, data);
99+
return indexes[0] != -1 ? true : false;
100+
};
101+
47102
const onMessage = (msg: any) => {
48103
let aiAnswer = JSON.parse(msg.body).content;
49104
if (msg.data !== "connected") {
@@ -52,12 +107,14 @@ export const InitStomp = (
52107
setBusy(false);
53108
tempArray.pop();
54109
messagesDP.current.data = [];
110+
const snipsExist = getClipboardOptions(aiAnswer);
55111
tempArray.push({
56112
id: tempArray.length as number,
57113
answer: aiAnswer,
58114
});
59115
chatData.current = tempArray;
60116
setUpdate(chatData.current);
117+
snipsExist ? addButtons() : null;
61118
}
62119
};
63120
return client;

‎app/src/index.html

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,16 +49,23 @@
4949
/>
5050
<!-- This is where you would add any app specific styling -->
5151
<link rel="stylesheet" href="styles/app.css" type="text/css" />
52+
53+
<script type="text/javascript">
54+
const copytoclip = (snip) => {
55+
if (window.isSecureContext) {
56+
if (snip) {
57+
navigator.clipboard.writeText(snip);
58+
}
59+
} else {
60+
console.log(
61+
"Copy to clipboard requires a secure HTTP server (HTTPS) or localhost domain"
62+
);
63+
}
64+
};
65+
</script>
5266
</head>
5367

54-
<body
55-
class="oj-web-applayout-body"
56-
data-oj-binding-provider="none"
57-
>
58-
<!-- <body
59-
class="oj-web-applayout-body oj-color-invert"
60-
data-oj-binding-provider="none"
61-
> -->
68+
<body class="oj-web-applayout-body" data-oj-binding-provider="none">
6269
<app-root></app-root>
6370
<!-- This injects script tags for the main javascript files -->
6471
<!-- injector:scripts -->

‎app/src/styles/app.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,18 @@ oj-sample-markdown-viewer .legacyStyling pre {
3636
color: black;
3737
}
3838

39+
.copy-to-clip-btn {
40+
position: relative;
41+
border-bottom-left-radius: 5px;
42+
border-width: thin;
43+
padding: 5px;
44+
float: right;
45+
top: -10px;
46+
right: -10px;
47+
border-top: none;
48+
border-right: none;
49+
}
50+
3951
.demo-copy-paste {
4052
user-select: text;
4153
}

0 commit comments

Comments
 (0)