ninegrid2 6.484.0 → 6.486.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ai/aiContainer.js +93 -0
- package/dist/bundle.cjs.js +92 -0
- package/dist/bundle.esm.js +92 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
- package/src/ai/aiContainer.js +93 -0
- package/src/index.js +1 -0
- /package/{src/ai//baiChat.js" → dist/ai/ai.js} +0 -0
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import ninegrid from "../index.js";
|
|
2
|
+
|
|
3
|
+
class aiContainer extends HTMLElement
|
|
4
|
+
{
|
|
5
|
+
|
|
6
|
+
constructor() {
|
|
7
|
+
super();
|
|
8
|
+
this.attachShadow({ mode: 'open' });
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
connectedCallback() {
|
|
12
|
+
|
|
13
|
+
const textareaText = "나에게 무엇이든 물어봐...";
|
|
14
|
+
|
|
15
|
+
this.shadowRoot.innerHTML = `
|
|
16
|
+
<style>
|
|
17
|
+
@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiContainer.css";
|
|
18
|
+
${ninegrid.getCustomPath(this,"aiContainer.css")}
|
|
19
|
+
</style>
|
|
20
|
+
|
|
21
|
+
<div className="wrapper">
|
|
22
|
+
<nx-ai-settings></nx-ai-settings>
|
|
23
|
+
|
|
24
|
+
<div className="container">
|
|
25
|
+
<div className="head">
|
|
26
|
+
<div className="logo"/>
|
|
27
|
+
</div>
|
|
28
|
+
<nx-ai-chat></nx-ai-chat>
|
|
29
|
+
<div className="foot">
|
|
30
|
+
<textarea name="ask" id="q" name="q" rows="4" placeholder="${textareaText}"></textarea>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div className="menu">
|
|
34
|
+
<div className="collapse-icon">
|
|
35
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
36
|
+
<path
|
|
37
|
+
d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8m-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5"/>
|
|
38
|
+
</svg>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<div className="menu-icon menu-filter">
|
|
42
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
43
|
+
<path
|
|
44
|
+
d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5z"/>
|
|
45
|
+
</svg>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div className="menu-icon menu-general active">
|
|
49
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
50
|
+
<path
|
|
51
|
+
d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15"/>
|
|
52
|
+
</svg>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div className="menu-icon menu-db">
|
|
56
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
57
|
+
<path
|
|
58
|
+
d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15"/>
|
|
59
|
+
</svg>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div className="menu-icon menu-setting">
|
|
63
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
64
|
+
<path
|
|
65
|
+
d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
|
|
66
|
+
</svg>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div className="expand-icon">
|
|
72
|
+
<svg width="32" height="32" fill="green" xmlns="http://www.w3.org/2000/svg" strokeWidth="1.5"
|
|
73
|
+
className="h-6 w-6"
|
|
74
|
+
viewBox="-0.17090198558635983 0.482230148717937 41.14235318283891 40.0339509076386">
|
|
75
|
+
<text x="-9999" y="-9999">ChatGPT</text>
|
|
76
|
+
<path
|
|
77
|
+
d="M37.532 16.87a9.963 9.963 0 0 0-.856-8.184 10.078 10.078 0 0 0-10.855-4.835A9.964 9.964 0 0 0 18.306.5a10.079 10.079 0 0 0-9.614 6.977 9.967 9.967 0 0 0-6.664 4.834 10.08 10.08 0 0 0 1.24 11.817 9.965 9.965 0 0 0 .856 8.185 10.079 10.079 0 0 0 10.855 4.835 9.965 9.965 0 0 0 7.516 3.35 10.078 10.078 0 0 0 9.617-6.981 9.967 9.967 0 0 0 6.663-4.834 10.079 10.079 0 0 0-1.243-11.813zM22.498 37.886a7.474 7.474 0 0 1-4.799-1.735c.061-.033.168-.091.237-.134l7.964-4.6a1.294 1.294 0 0 0 .655-1.134V19.054l3.366 1.944a.12.12 0 0 1 .066.092v9.299a7.505 7.505 0 0 1-7.49 7.496zM6.392 31.006a7.471 7.471 0 0 1-.894-5.023c.06.036.162.099.237.141l7.964 4.6a1.297 1.297 0 0 0 1.308 0l9.724-5.614v3.888a.12.12 0 0 1-.048.103l-8.051 4.649a7.504 7.504 0 0 1-10.24-2.744zM4.297 13.62A7.469 7.469 0 0 1 8.2 10.333c0 .068-.004.19-.004.274v9.201a1.294 1.294 0 0 0 .654 1.132l9.723 5.614-3.366 1.944a.12.12 0 0 1-.114.01L7.04 23.856a7.504 7.504 0 0 1-2.743-10.237zm27.658 6.437l-9.724-5.615 3.367-1.943a.121.121 0 0 1 .113-.01l8.052 4.648a7.498 7.498 0 0 1-1.158 13.528v-9.476a1.293 1.293 0 0 0-.65-1.132zm3.35-5.043c-.059-.037-.162-.099-.236-.141l-7.965-4.6a1.298 1.298 0 0 0-1.308 0l-9.723 5.614v-3.888a.12.12 0 0 1 .048-.103l8.05-4.645a7.497 7.497 0 0 1 11.135 7.763zm-21.063 6.929l-3.367-1.944a.12.12 0 0 1-.065-.092v-9.299a7.497 7.497 0 0 1 12.293-5.756 6.94 6.94 0 0 0-.236.134l-7.965 4.6a1.294 1.294 0 0 0-.654 1.132l-.006 11.225zm1.829-3.943l4.33-2.501 4.332 2.5v5l-4.331 2.5-4.331-2.5V18z"/>
|
|
78
|
+
</svg>
|
|
79
|
+
</div>
|
|
80
|
+
`;
|
|
81
|
+
|
|
82
|
+
requestAnimationFrame(() => {
|
|
83
|
+
this.#init();
|
|
84
|
+
});
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
#init = (info) => {
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
customElements.define("nx-ai-container", aiContainer);
|
package/dist/bundle.cjs.js
CHANGED
|
@@ -27854,6 +27854,98 @@ customElements.define("nx-ai-ing-message", aiIngMessage);
|
|
|
27854
27854
|
customElements.define("nx-ai-my-message", aiMyMessage);
|
|
27855
27855
|
customElements.define("nx-ai-chat", aiChat);
|
|
27856
27856
|
|
|
27857
|
+
class aiContainer extends HTMLElement
|
|
27858
|
+
{
|
|
27859
|
+
|
|
27860
|
+
constructor() {
|
|
27861
|
+
super();
|
|
27862
|
+
this.attachShadow({ mode: 'open' });
|
|
27863
|
+
}
|
|
27864
|
+
|
|
27865
|
+
connectedCallback() {
|
|
27866
|
+
|
|
27867
|
+
const textareaText = "나에게 무엇이든 물어봐...";
|
|
27868
|
+
|
|
27869
|
+
this.shadowRoot.innerHTML = `
|
|
27870
|
+
<style>
|
|
27871
|
+
@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiContainer.css";
|
|
27872
|
+
${ninegrid.getCustomPath(this,"aiContainer.css")}
|
|
27873
|
+
</style>
|
|
27874
|
+
|
|
27875
|
+
<div className="wrapper">
|
|
27876
|
+
<nx-ai-settings></nx-ai-settings>
|
|
27877
|
+
|
|
27878
|
+
<div className="container">
|
|
27879
|
+
<div className="head">
|
|
27880
|
+
<div className="logo"/>
|
|
27881
|
+
</div>
|
|
27882
|
+
<nx-ai-chat></nx-ai-chat>
|
|
27883
|
+
<div className="foot">
|
|
27884
|
+
<textarea name="ask" id="q" name="q" rows="4" placeholder="${textareaText}"></textarea>
|
|
27885
|
+
</div>
|
|
27886
|
+
</div>
|
|
27887
|
+
<div className="menu">
|
|
27888
|
+
<div className="collapse-icon">
|
|
27889
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
27890
|
+
<path
|
|
27891
|
+
d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8m-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5"/>
|
|
27892
|
+
</svg>
|
|
27893
|
+
</div>
|
|
27894
|
+
|
|
27895
|
+
<div className="menu-icon menu-filter">
|
|
27896
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
27897
|
+
<path
|
|
27898
|
+
d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5z"/>
|
|
27899
|
+
</svg>
|
|
27900
|
+
</div>
|
|
27901
|
+
|
|
27902
|
+
<div className="menu-icon menu-general active">
|
|
27903
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
27904
|
+
<path
|
|
27905
|
+
d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15"/>
|
|
27906
|
+
</svg>
|
|
27907
|
+
</div>
|
|
27908
|
+
|
|
27909
|
+
<div className="menu-icon menu-db">
|
|
27910
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
27911
|
+
<path
|
|
27912
|
+
d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15"/>
|
|
27913
|
+
</svg>
|
|
27914
|
+
</div>
|
|
27915
|
+
|
|
27916
|
+
<div className="menu-icon menu-setting">
|
|
27917
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
27918
|
+
<path
|
|
27919
|
+
d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
|
|
27920
|
+
</svg>
|
|
27921
|
+
</div>
|
|
27922
|
+
</div>
|
|
27923
|
+
</div>
|
|
27924
|
+
|
|
27925
|
+
<div className="expand-icon">
|
|
27926
|
+
<svg width="32" height="32" fill="green" xmlns="http://www.w3.org/2000/svg" strokeWidth="1.5"
|
|
27927
|
+
className="h-6 w-6"
|
|
27928
|
+
viewBox="-0.17090198558635983 0.482230148717937 41.14235318283891 40.0339509076386">
|
|
27929
|
+
<text x="-9999" y="-9999">ChatGPT</text>
|
|
27930
|
+
<path
|
|
27931
|
+
d="M37.532 16.87a9.963 9.963 0 0 0-.856-8.184 10.078 10.078 0 0 0-10.855-4.835A9.964 9.964 0 0 0 18.306.5a10.079 10.079 0 0 0-9.614 6.977 9.967 9.967 0 0 0-6.664 4.834 10.08 10.08 0 0 0 1.24 11.817 9.965 9.965 0 0 0 .856 8.185 10.079 10.079 0 0 0 10.855 4.835 9.965 9.965 0 0 0 7.516 3.35 10.078 10.078 0 0 0 9.617-6.981 9.967 9.967 0 0 0 6.663-4.834 10.079 10.079 0 0 0-1.243-11.813zM22.498 37.886a7.474 7.474 0 0 1-4.799-1.735c.061-.033.168-.091.237-.134l7.964-4.6a1.294 1.294 0 0 0 .655-1.134V19.054l3.366 1.944a.12.12 0 0 1 .066.092v9.299a7.505 7.505 0 0 1-7.49 7.496zM6.392 31.006a7.471 7.471 0 0 1-.894-5.023c.06.036.162.099.237.141l7.964 4.6a1.297 1.297 0 0 0 1.308 0l9.724-5.614v3.888a.12.12 0 0 1-.048.103l-8.051 4.649a7.504 7.504 0 0 1-10.24-2.744zM4.297 13.62A7.469 7.469 0 0 1 8.2 10.333c0 .068-.004.19-.004.274v9.201a1.294 1.294 0 0 0 .654 1.132l9.723 5.614-3.366 1.944a.12.12 0 0 1-.114.01L7.04 23.856a7.504 7.504 0 0 1-2.743-10.237zm27.658 6.437l-9.724-5.615 3.367-1.943a.121.121 0 0 1 .113-.01l8.052 4.648a7.498 7.498 0 0 1-1.158 13.528v-9.476a1.293 1.293 0 0 0-.65-1.132zm3.35-5.043c-.059-.037-.162-.099-.236-.141l-7.965-4.6a1.298 1.298 0 0 0-1.308 0l-9.723 5.614v-3.888a.12.12 0 0 1 .048-.103l8.05-4.645a7.497 7.497 0 0 1 11.135 7.763zm-21.063 6.929l-3.367-1.944a.12.12 0 0 1-.065-.092v-9.299a7.497 7.497 0 0 1 12.293-5.756 6.94 6.94 0 0 0-.236.134l-7.965 4.6a1.294 1.294 0 0 0-.654 1.132l-.006 11.225zm1.829-3.943l4.33-2.501 4.332 2.5v5l-4.331 2.5-4.331-2.5V18z"/>
|
|
27932
|
+
</svg>
|
|
27933
|
+
</div>
|
|
27934
|
+
`;
|
|
27935
|
+
|
|
27936
|
+
requestAnimationFrame(() => {
|
|
27937
|
+
this.#init();
|
|
27938
|
+
});
|
|
27939
|
+
};
|
|
27940
|
+
|
|
27941
|
+
#init = (info) => {
|
|
27942
|
+
|
|
27943
|
+
|
|
27944
|
+
};
|
|
27945
|
+
}
|
|
27946
|
+
|
|
27947
|
+
customElements.define("nx-ai-container", aiContainer);
|
|
27948
|
+
|
|
27857
27949
|
//import $ from "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js";
|
|
27858
27950
|
|
|
27859
27951
|
|
package/dist/bundle.esm.js
CHANGED
|
@@ -27852,6 +27852,98 @@ customElements.define("nx-ai-ing-message", aiIngMessage);
|
|
|
27852
27852
|
customElements.define("nx-ai-my-message", aiMyMessage);
|
|
27853
27853
|
customElements.define("nx-ai-chat", aiChat);
|
|
27854
27854
|
|
|
27855
|
+
class aiContainer extends HTMLElement
|
|
27856
|
+
{
|
|
27857
|
+
|
|
27858
|
+
constructor() {
|
|
27859
|
+
super();
|
|
27860
|
+
this.attachShadow({ mode: 'open' });
|
|
27861
|
+
}
|
|
27862
|
+
|
|
27863
|
+
connectedCallback() {
|
|
27864
|
+
|
|
27865
|
+
const textareaText = "나에게 무엇이든 물어봐...";
|
|
27866
|
+
|
|
27867
|
+
this.shadowRoot.innerHTML = `
|
|
27868
|
+
<style>
|
|
27869
|
+
@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiContainer.css";
|
|
27870
|
+
${ninegrid.getCustomPath(this,"aiContainer.css")}
|
|
27871
|
+
</style>
|
|
27872
|
+
|
|
27873
|
+
<div className="wrapper">
|
|
27874
|
+
<nx-ai-settings></nx-ai-settings>
|
|
27875
|
+
|
|
27876
|
+
<div className="container">
|
|
27877
|
+
<div className="head">
|
|
27878
|
+
<div className="logo"/>
|
|
27879
|
+
</div>
|
|
27880
|
+
<nx-ai-chat></nx-ai-chat>
|
|
27881
|
+
<div className="foot">
|
|
27882
|
+
<textarea name="ask" id="q" name="q" rows="4" placeholder="${textareaText}"></textarea>
|
|
27883
|
+
</div>
|
|
27884
|
+
</div>
|
|
27885
|
+
<div className="menu">
|
|
27886
|
+
<div className="collapse-icon">
|
|
27887
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
27888
|
+
<path
|
|
27889
|
+
d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8m-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5"/>
|
|
27890
|
+
</svg>
|
|
27891
|
+
</div>
|
|
27892
|
+
|
|
27893
|
+
<div className="menu-icon menu-filter">
|
|
27894
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
27895
|
+
<path
|
|
27896
|
+
d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5z"/>
|
|
27897
|
+
</svg>
|
|
27898
|
+
</div>
|
|
27899
|
+
|
|
27900
|
+
<div className="menu-icon menu-general active">
|
|
27901
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
27902
|
+
<path
|
|
27903
|
+
d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15"/>
|
|
27904
|
+
</svg>
|
|
27905
|
+
</div>
|
|
27906
|
+
|
|
27907
|
+
<div className="menu-icon menu-db">
|
|
27908
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
27909
|
+
<path
|
|
27910
|
+
d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15"/>
|
|
27911
|
+
</svg>
|
|
27912
|
+
</div>
|
|
27913
|
+
|
|
27914
|
+
<div className="menu-icon menu-setting">
|
|
27915
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
27916
|
+
<path
|
|
27917
|
+
d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
|
|
27918
|
+
</svg>
|
|
27919
|
+
</div>
|
|
27920
|
+
</div>
|
|
27921
|
+
</div>
|
|
27922
|
+
|
|
27923
|
+
<div className="expand-icon">
|
|
27924
|
+
<svg width="32" height="32" fill="green" xmlns="http://www.w3.org/2000/svg" strokeWidth="1.5"
|
|
27925
|
+
className="h-6 w-6"
|
|
27926
|
+
viewBox="-0.17090198558635983 0.482230148717937 41.14235318283891 40.0339509076386">
|
|
27927
|
+
<text x="-9999" y="-9999">ChatGPT</text>
|
|
27928
|
+
<path
|
|
27929
|
+
d="M37.532 16.87a9.963 9.963 0 0 0-.856-8.184 10.078 10.078 0 0 0-10.855-4.835A9.964 9.964 0 0 0 18.306.5a10.079 10.079 0 0 0-9.614 6.977 9.967 9.967 0 0 0-6.664 4.834 10.08 10.08 0 0 0 1.24 11.817 9.965 9.965 0 0 0 .856 8.185 10.079 10.079 0 0 0 10.855 4.835 9.965 9.965 0 0 0 7.516 3.35 10.078 10.078 0 0 0 9.617-6.981 9.967 9.967 0 0 0 6.663-4.834 10.079 10.079 0 0 0-1.243-11.813zM22.498 37.886a7.474 7.474 0 0 1-4.799-1.735c.061-.033.168-.091.237-.134l7.964-4.6a1.294 1.294 0 0 0 .655-1.134V19.054l3.366 1.944a.12.12 0 0 1 .066.092v9.299a7.505 7.505 0 0 1-7.49 7.496zM6.392 31.006a7.471 7.471 0 0 1-.894-5.023c.06.036.162.099.237.141l7.964 4.6a1.297 1.297 0 0 0 1.308 0l9.724-5.614v3.888a.12.12 0 0 1-.048.103l-8.051 4.649a7.504 7.504 0 0 1-10.24-2.744zM4.297 13.62A7.469 7.469 0 0 1 8.2 10.333c0 .068-.004.19-.004.274v9.201a1.294 1.294 0 0 0 .654 1.132l9.723 5.614-3.366 1.944a.12.12 0 0 1-.114.01L7.04 23.856a7.504 7.504 0 0 1-2.743-10.237zm27.658 6.437l-9.724-5.615 3.367-1.943a.121.121 0 0 1 .113-.01l8.052 4.648a7.498 7.498 0 0 1-1.158 13.528v-9.476a1.293 1.293 0 0 0-.65-1.132zm3.35-5.043c-.059-.037-.162-.099-.236-.141l-7.965-4.6a1.298 1.298 0 0 0-1.308 0l-9.723 5.614v-3.888a.12.12 0 0 1 .048-.103l8.05-4.645a7.497 7.497 0 0 1 11.135 7.763zm-21.063 6.929l-3.367-1.944a.12.12 0 0 1-.065-.092v-9.299a7.497 7.497 0 0 1 12.293-5.756 6.94 6.94 0 0 0-.236.134l-7.965 4.6a1.294 1.294 0 0 0-.654 1.132l-.006 11.225zm1.829-3.943l4.33-2.501 4.332 2.5v5l-4.331 2.5-4.331-2.5V18z"/>
|
|
27930
|
+
</svg>
|
|
27931
|
+
</div>
|
|
27932
|
+
`;
|
|
27933
|
+
|
|
27934
|
+
requestAnimationFrame(() => {
|
|
27935
|
+
this.#init();
|
|
27936
|
+
});
|
|
27937
|
+
};
|
|
27938
|
+
|
|
27939
|
+
#init = (info) => {
|
|
27940
|
+
|
|
27941
|
+
|
|
27942
|
+
};
|
|
27943
|
+
}
|
|
27944
|
+
|
|
27945
|
+
customElements.define("nx-ai-container", aiContainer);
|
|
27946
|
+
|
|
27855
27947
|
//import $ from "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js";
|
|
27856
27948
|
|
|
27857
27949
|
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import ninegrid from "../index.js";
|
|
2
|
+
|
|
3
|
+
class aiContainer extends HTMLElement
|
|
4
|
+
{
|
|
5
|
+
|
|
6
|
+
constructor() {
|
|
7
|
+
super();
|
|
8
|
+
this.attachShadow({ mode: 'open' });
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
connectedCallback() {
|
|
12
|
+
|
|
13
|
+
const textareaText = "나에게 무엇이든 물어봐...";
|
|
14
|
+
|
|
15
|
+
this.shadowRoot.innerHTML = `
|
|
16
|
+
<style>
|
|
17
|
+
@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiContainer.css";
|
|
18
|
+
${ninegrid.getCustomPath(this,"aiContainer.css")}
|
|
19
|
+
</style>
|
|
20
|
+
|
|
21
|
+
<div className="wrapper">
|
|
22
|
+
<nx-ai-settings></nx-ai-settings>
|
|
23
|
+
|
|
24
|
+
<div className="container">
|
|
25
|
+
<div className="head">
|
|
26
|
+
<div className="logo"/>
|
|
27
|
+
</div>
|
|
28
|
+
<nx-ai-chat></nx-ai-chat>
|
|
29
|
+
<div className="foot">
|
|
30
|
+
<textarea name="ask" id="q" name="q" rows="4" placeholder="${textareaText}"></textarea>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div className="menu">
|
|
34
|
+
<div className="collapse-icon">
|
|
35
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
36
|
+
<path
|
|
37
|
+
d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8m-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5"/>
|
|
38
|
+
</svg>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<div className="menu-icon menu-filter">
|
|
42
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
43
|
+
<path
|
|
44
|
+
d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5z"/>
|
|
45
|
+
</svg>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div className="menu-icon menu-general active">
|
|
49
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
50
|
+
<path
|
|
51
|
+
d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15"/>
|
|
52
|
+
</svg>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div className="menu-icon menu-db">
|
|
56
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
57
|
+
<path
|
|
58
|
+
d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15"/>
|
|
59
|
+
</svg>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div className="menu-icon menu-setting">
|
|
63
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
64
|
+
<path
|
|
65
|
+
d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
|
|
66
|
+
</svg>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div className="expand-icon">
|
|
72
|
+
<svg width="32" height="32" fill="green" xmlns="http://www.w3.org/2000/svg" strokeWidth="1.5"
|
|
73
|
+
className="h-6 w-6"
|
|
74
|
+
viewBox="-0.17090198558635983 0.482230148717937 41.14235318283891 40.0339509076386">
|
|
75
|
+
<text x="-9999" y="-9999">ChatGPT</text>
|
|
76
|
+
<path
|
|
77
|
+
d="M37.532 16.87a9.963 9.963 0 0 0-.856-8.184 10.078 10.078 0 0 0-10.855-4.835A9.964 9.964 0 0 0 18.306.5a10.079 10.079 0 0 0-9.614 6.977 9.967 9.967 0 0 0-6.664 4.834 10.08 10.08 0 0 0 1.24 11.817 9.965 9.965 0 0 0 .856 8.185 10.079 10.079 0 0 0 10.855 4.835 9.965 9.965 0 0 0 7.516 3.35 10.078 10.078 0 0 0 9.617-6.981 9.967 9.967 0 0 0 6.663-4.834 10.079 10.079 0 0 0-1.243-11.813zM22.498 37.886a7.474 7.474 0 0 1-4.799-1.735c.061-.033.168-.091.237-.134l7.964-4.6a1.294 1.294 0 0 0 .655-1.134V19.054l3.366 1.944a.12.12 0 0 1 .066.092v9.299a7.505 7.505 0 0 1-7.49 7.496zM6.392 31.006a7.471 7.471 0 0 1-.894-5.023c.06.036.162.099.237.141l7.964 4.6a1.297 1.297 0 0 0 1.308 0l9.724-5.614v3.888a.12.12 0 0 1-.048.103l-8.051 4.649a7.504 7.504 0 0 1-10.24-2.744zM4.297 13.62A7.469 7.469 0 0 1 8.2 10.333c0 .068-.004.19-.004.274v9.201a1.294 1.294 0 0 0 .654 1.132l9.723 5.614-3.366 1.944a.12.12 0 0 1-.114.01L7.04 23.856a7.504 7.504 0 0 1-2.743-10.237zm27.658 6.437l-9.724-5.615 3.367-1.943a.121.121 0 0 1 .113-.01l8.052 4.648a7.498 7.498 0 0 1-1.158 13.528v-9.476a1.293 1.293 0 0 0-.65-1.132zm3.35-5.043c-.059-.037-.162-.099-.236-.141l-7.965-4.6a1.298 1.298 0 0 0-1.308 0l-9.723 5.614v-3.888a.12.12 0 0 1 .048-.103l8.05-4.645a7.497 7.497 0 0 1 11.135 7.763zm-21.063 6.929l-3.367-1.944a.12.12 0 0 1-.065-.092v-9.299a7.497 7.497 0 0 1 12.293-5.756 6.94 6.94 0 0 0-.236.134l-7.965 4.6a1.294 1.294 0 0 0-.654 1.132l-.006 11.225zm1.829-3.943l4.33-2.501 4.332 2.5v5l-4.331 2.5-4.331-2.5V18z"/>
|
|
78
|
+
</svg>
|
|
79
|
+
</div>
|
|
80
|
+
`;
|
|
81
|
+
|
|
82
|
+
requestAnimationFrame(() => {
|
|
83
|
+
this.#init();
|
|
84
|
+
});
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
#init = (info) => {
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
customElements.define("nx-ai-container", aiContainer);
|
package/src/index.js
CHANGED
|
File without changes
|