ninegrid2 6.492.0 → 6.494.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.
Files changed (5) hide show
  1. package/dist/ai/aiContainer.js +25 -18
  2. package/dist/bundle.cjs.js +23 -18
  3. package/dist/bundle.esm.js +23 -18
  4. package/package.json +1 -1
  5. package/src/ai/aiContainer.js +25 -18
package/dist/ai/aiContainer.js CHANGED
@@ -18,48 +18,44 @@ class aiContainer extends HTMLElement
18
18
  ${ninegrid.getCustomPath(this,"aiContainer.css")}
19
19
  </style>
20
20
 
21
- <div className="wrapper">
21
+ <div class="wrapper">
22
22
  <nx-ai-settings></nx-ai-settings>
23
23
 
24
- <div className="container">
25
- <div className="head">
26
- <div className="logo"></div>
24
+ <div class="container">
25
+ <div class="head">
26
+ <div class="logo"></div>
27
27
  </div>
28
28
  <nx-ai-chat></nx-ai-chat>
29
- <div className="foot">
29
+ <div class="foot">
30
30
  <textarea name="ask" id="q" name="q" rows="4" placeholder="${textareaText}"></textarea>
31
31
  </div>
32
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>
33
+ <div class="menu">
34
+ <div class="collapse-icon">
39
35
  </div>
40
36
 
41
- <div className="menu-icon menu-filter">
37
+ <div class="menu-icon menu-filter">
42
38
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
43
39
  <path
44
40
  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
41
  </svg>
46
42
  </div>
47
43
 
48
- <div className="menu-icon menu-general active">
44
+ <div class="menu-icon menu-general active">
49
45
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
50
46
  <path
51
47
  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
48
  </svg>
53
49
  </div>
54
50
 
55
- <div className="menu-icon menu-db">
51
+ <div class="menu-icon menu-db">
56
52
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
57
53
  <path
58
54
  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
55
  </svg>
60
56
  </div>
61
57
 
62
- <div className="menu-icon menu-setting">
58
+ <div class="menu-icon menu-setting">
63
59
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
64
60
  <path
65
61
  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"/>
@@ -68,9 +64,9 @@ class aiContainer extends HTMLElement
68
64
  </div>
69
65
  </div>
70
66
 
71
- <div className="expand-icon">
67
+ <div class="expand-icon">
72
68
  <svg width="32" height="32" fill="green" xmlns="http://www.w3.org/2000/svg" strokeWidth="1.5"
73
- className="h-6 w-6"
69
+ class="h-6 w-6"
74
70
  viewBox="-0.17090198558635983 0.482230148717937 41.14235318283891 40.0339509076386">
75
71
  <text x="-9999" y="-9999">ChatGPT</text>
76
72
  <path
@@ -86,7 +82,18 @@ class aiContainer extends HTMLElement
86
82
 
87
83
  #init = (info) => {
88
84
 
89
-
85
+ const toggleCollapseHandler = () => {
86
+ if (!containerRef.current) return;
87
+
88
+ containerRef.current.classList.toggle("collapse");
89
+
90
+ if (!containerRef.current.classList.contains("collapse")) {
91
+ // this.#resetAsk();
92
+ }
93
+ };
94
+
95
+ this.shadowRoot.querySelector(".expand-icon").addEventListener("click", toggleCollapseHandler);
96
+ this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", toggleCollapseHandler);
90
97
  };
91
98
  }
92
99
 
package/dist/bundle.cjs.js CHANGED
@@ -27872,48 +27872,44 @@ class aiContainer extends HTMLElement
27872
27872
  ${ninegrid.getCustomPath(this,"aiContainer.css")}
27873
27873
  </style>
27874
27874
 
27875
- <div className="wrapper">
27875
+ <div class="wrapper">
27876
27876
  <nx-ai-settings></nx-ai-settings>
27877
27877
 
27878
- <div className="container">
27879
- <div className="head">
27880
- <div className="logo"></div>
27878
+ <div class="container">
27879
+ <div class="head">
27880
+ <div class="logo"></div>
27881
27881
  </div>
27882
27882
  <nx-ai-chat></nx-ai-chat>
27883
- <div className="foot">
27883
+ <div class="foot">
27884
27884
  <textarea name="ask" id="q" name="q" rows="4" placeholder="${textareaText}"></textarea>
27885
27885
  </div>
27886
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>
27887
+ <div class="menu">
27888
+ <div class="collapse-icon">
27893
27889
  </div>
27894
27890
 
27895
- <div className="menu-icon menu-filter">
27891
+ <div class="menu-icon menu-filter">
27896
27892
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27897
27893
  <path
27898
27894
  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
27895
  </svg>
27900
27896
  </div>
27901
27897
 
27902
- <div className="menu-icon menu-general active">
27898
+ <div class="menu-icon menu-general active">
27903
27899
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27904
27900
  <path
27905
27901
  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
27902
  </svg>
27907
27903
  </div>
27908
27904
 
27909
- <div className="menu-icon menu-db">
27905
+ <div class="menu-icon menu-db">
27910
27906
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27911
27907
  <path
27912
27908
  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
27909
  </svg>
27914
27910
  </div>
27915
27911
 
27916
- <div className="menu-icon menu-setting">
27912
+ <div class="menu-icon menu-setting">
27917
27913
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27918
27914
  <path
27919
27915
  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"/>
@@ -27922,9 +27918,9 @@ class aiContainer extends HTMLElement
27922
27918
  </div>
27923
27919
  </div>
27924
27920
 
27925
- <div className="expand-icon">
27921
+ <div class="expand-icon">
27926
27922
  <svg width="32" height="32" fill="green" xmlns="http://www.w3.org/2000/svg" strokeWidth="1.5"
27927
- className="h-6 w-6"
27923
+ class="h-6 w-6"
27928
27924
  viewBox="-0.17090198558635983 0.482230148717937 41.14235318283891 40.0339509076386">
27929
27925
  <text x="-9999" y="-9999">ChatGPT</text>
27930
27926
  <path
@@ -27940,7 +27936,16 @@ class aiContainer extends HTMLElement
27940
27936
 
27941
27937
  #init = (info) => {
27942
27938
 
27943
-
27939
+ const toggleCollapseHandler = () => {
27940
+ if (!containerRef.current) return;
27941
+
27942
+ containerRef.current.classList.toggle("collapse");
27943
+
27944
+ if (!containerRef.current.classList.contains("collapse")) ;
27945
+ };
27946
+
27947
+ this.shadowRoot.querySelector(".expand-icon").addEventListener("click", toggleCollapseHandler);
27948
+ this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", toggleCollapseHandler);
27944
27949
  };
27945
27950
  }
27946
27951
 
package/dist/bundle.esm.js CHANGED
@@ -27870,48 +27870,44 @@ class aiContainer extends HTMLElement
27870
27870
  ${ninegrid.getCustomPath(this,"aiContainer.css")}
27871
27871
  </style>
27872
27872
 
27873
- <div className="wrapper">
27873
+ <div class="wrapper">
27874
27874
  <nx-ai-settings></nx-ai-settings>
27875
27875
 
27876
- <div className="container">
27877
- <div className="head">
27878
- <div className="logo"></div>
27876
+ <div class="container">
27877
+ <div class="head">
27878
+ <div class="logo"></div>
27879
27879
  </div>
27880
27880
  <nx-ai-chat></nx-ai-chat>
27881
- <div className="foot">
27881
+ <div class="foot">
27882
27882
  <textarea name="ask" id="q" name="q" rows="4" placeholder="${textareaText}"></textarea>
27883
27883
  </div>
27884
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>
27885
+ <div class="menu">
27886
+ <div class="collapse-icon">
27891
27887
  </div>
27892
27888
 
27893
- <div className="menu-icon menu-filter">
27889
+ <div class="menu-icon menu-filter">
27894
27890
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27895
27891
  <path
27896
27892
  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
27893
  </svg>
27898
27894
  </div>
27899
27895
 
27900
- <div className="menu-icon menu-general active">
27896
+ <div class="menu-icon menu-general active">
27901
27897
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27902
27898
  <path
27903
27899
  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
27900
  </svg>
27905
27901
  </div>
27906
27902
 
27907
- <div className="menu-icon menu-db">
27903
+ <div class="menu-icon menu-db">
27908
27904
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27909
27905
  <path
27910
27906
  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
27907
  </svg>
27912
27908
  </div>
27913
27909
 
27914
- <div className="menu-icon menu-setting">
27910
+ <div class="menu-icon menu-setting">
27915
27911
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27916
27912
  <path
27917
27913
  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,9 +27916,9 @@ class aiContainer extends HTMLElement
27920
27916
  </div>
27921
27917
  </div>
27922
27918
 
27923
- <div className="expand-icon">
27919
+ <div class="expand-icon">
27924
27920
  <svg width="32" height="32" fill="green" xmlns="http://www.w3.org/2000/svg" strokeWidth="1.5"
27925
- className="h-6 w-6"
27921
+ class="h-6 w-6"
27926
27922
  viewBox="-0.17090198558635983 0.482230148717937 41.14235318283891 40.0339509076386">
27927
27923
  <text x="-9999" y="-9999">ChatGPT</text>
27928
27924
  <path
@@ -27938,7 +27934,16 @@ class aiContainer extends HTMLElement
27938
27934
 
27939
27935
  #init = (info) => {
27940
27936
 
27941
-
27937
+ const toggleCollapseHandler = () => {
27938
+ if (!containerRef.current) return;
27939
+
27940
+ containerRef.current.classList.toggle("collapse");
27941
+
27942
+ if (!containerRef.current.classList.contains("collapse")) ;
27943
+ };
27944
+
27945
+ this.shadowRoot.querySelector(".expand-icon").addEventListener("click", toggleCollapseHandler);
27946
+ this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", toggleCollapseHandler);
27942
27947
  };
27943
27948
  }
27944
27949
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.492.0",
4
+ "version": "6.494.0",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
7
7
  "import": "./dist/index.js",
package/src/ai/aiContainer.js CHANGED
@@ -18,48 +18,44 @@ class aiContainer extends HTMLElement
18
18
  ${ninegrid.getCustomPath(this,"aiContainer.css")}
19
19
  </style>
20
20
 
21
- <div className="wrapper">
21
+ <div class="wrapper">
22
22
  <nx-ai-settings></nx-ai-settings>
23
23
 
24
- <div className="container">
25
- <div className="head">
26
- <div className="logo"></div>
24
+ <div class="container">
25
+ <div class="head">
26
+ <div class="logo"></div>
27
27
  </div>
28
28
  <nx-ai-chat></nx-ai-chat>
29
- <div className="foot">
29
+ <div class="foot">
30
30
  <textarea name="ask" id="q" name="q" rows="4" placeholder="${textareaText}"></textarea>
31
31
  </div>
32
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>
33
+ <div class="menu">
34
+ <div class="collapse-icon">
39
35
  </div>
40
36
 
41
- <div className="menu-icon menu-filter">
37
+ <div class="menu-icon menu-filter">
42
38
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
43
39
  <path
44
40
  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
41
  </svg>
46
42
  </div>
47
43
 
48
- <div className="menu-icon menu-general active">
44
+ <div class="menu-icon menu-general active">
49
45
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
50
46
  <path
51
47
  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
48
  </svg>
53
49
  </div>
54
50
 
55
- <div className="menu-icon menu-db">
51
+ <div class="menu-icon menu-db">
56
52
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
57
53
  <path
58
54
  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
55
  </svg>
60
56
  </div>
61
57
 
62
- <div className="menu-icon menu-setting">
58
+ <div class="menu-icon menu-setting">
63
59
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
64
60
  <path
65
61
  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"/>
@@ -68,9 +64,9 @@ class aiContainer extends HTMLElement
68
64
  </div>
69
65
  </div>
70
66
 
71
- <div className="expand-icon">
67
+ <div class="expand-icon">
72
68
  <svg width="32" height="32" fill="green" xmlns="http://www.w3.org/2000/svg" strokeWidth="1.5"
73
- className="h-6 w-6"
69
+ class="h-6 w-6"
74
70
  viewBox="-0.17090198558635983 0.482230148717937 41.14235318283891 40.0339509076386">
75
71
  <text x="-9999" y="-9999">ChatGPT</text>
76
72
  <path
@@ -86,7 +82,18 @@ class aiContainer extends HTMLElement
86
82
 
87
83
  #init = (info) => {
88
84
 
89
-
85
+ const toggleCollapseHandler = () => {
86
+ if (!containerRef.current) return;
87
+
88
+ containerRef.current.classList.toggle("collapse");
89
+
90
+ if (!containerRef.current.classList.contains("collapse")) {
91
+ // this.#resetAsk();
92
+ }
93
+ };
94
+
95
+ this.shadowRoot.querySelector(".expand-icon").addEventListener("click", toggleCollapseHandler);
96
+ this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", toggleCollapseHandler);
90
97
  };
91
98
  }
92
99