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.
@@ -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);
@@ -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
 
@@ -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
@@ -104,6 +104,7 @@ import "./utils/ngPrototype.js";
104
104
 
105
105
  import "./ai/aiSettings.js";
106
106
  import "./ai/aiMessage.js";
107
+ import "./ai/aiContainer.js";
107
108
 
108
109
  if (typeof window !== "undefined") {
109
110
  //window.ninegrid = window.NG = ninegrid;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.484.0",
4
+ "version": "6.486.0",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
7
7
  "import": "./dist/index.js",
@@ -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
@@ -104,6 +104,7 @@ import "./utils/ngPrototype.js";
104
104
 
105
105
  import "./ai/aiSettings.js";
106
106
  import "./ai/aiMessage.js";
107
+ import "./ai/aiContainer.js";
107
108
 
108
109
  if (typeof window !== "undefined") {
109
110
  //window.ninegrid = window.NG = ninegrid;
File without changes