@memori.ai/memori-react 8.12.0 → 8.13.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 (135) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/components/Chat/Chat.css +37 -3
  3. package/dist/components/Chat/Chat.js +60 -22
  4. package/dist/components/Chat/Chat.js.map +1 -1
  5. package/dist/components/ChatBubble/ChatBubble.css +9 -5
  6. package/dist/components/ChatBubble/ChatBubble.js +54 -11
  7. package/dist/components/ChatBubble/ChatBubble.js.map +1 -1
  8. package/dist/components/ChatInputs/ChatInputs.css +293 -17
  9. package/dist/components/ChatInputs/ChatInputs.js +41 -25
  10. package/dist/components/ChatInputs/ChatInputs.js.map +1 -1
  11. package/dist/components/ChatTextArea/ChatTextArea.css +75 -31
  12. package/dist/components/ChatTextArea/ChatTextArea.js +47 -18
  13. package/dist/components/ChatTextArea/ChatTextArea.js.map +1 -1
  14. package/dist/components/FilePreview/FilePreview.css +225 -146
  15. package/dist/components/FilePreview/FilePreview.d.ts +1 -2
  16. package/dist/components/FilePreview/FilePreview.js +20 -6
  17. package/dist/components/FilePreview/FilePreview.js.map +1 -1
  18. package/dist/components/Header/Header.css +2 -2
  19. package/dist/components/MediaWidget/MediaItemWidget.js +2 -1
  20. package/dist/components/MediaWidget/MediaItemWidget.js.map +1 -1
  21. package/dist/components/MediaWidget/MediaWidget.css +0 -4
  22. package/dist/components/MemoriWidget/MemoriWidget.css +11 -2
  23. package/dist/components/MemoriWidget/MemoriWidget.js +41 -5
  24. package/dist/components/MemoriWidget/MemoriWidget.js.map +1 -1
  25. package/dist/components/MicrophoneButton/MicrophoneButton.css +2 -2
  26. package/dist/components/StartPanel/StartPanel.css +8 -0
  27. package/dist/components/UploadButton/UploadButton.css +20 -17
  28. package/dist/components/UploadButton/UploadButton.js +218 -89
  29. package/dist/components/UploadButton/UploadButton.js.map +1 -1
  30. package/dist/components/UploadButton/UploadDocuments/UploadDocuments.js +14 -4
  31. package/dist/components/UploadButton/UploadDocuments/UploadDocuments.js.map +1 -1
  32. package/dist/components/UploadButton/UploadImages/UploadImages.js +143 -16
  33. package/dist/components/UploadButton/UploadImages/UploadImages.js.map +1 -1
  34. package/dist/components/layouts/chat.css +1 -1
  35. package/dist/helpers/constants.d.ts +1 -0
  36. package/dist/helpers/constants.js +2 -1
  37. package/dist/helpers/constants.js.map +1 -1
  38. package/dist/helpers/imageCompression.d.ts +7 -0
  39. package/dist/helpers/imageCompression.js +123 -0
  40. package/dist/helpers/imageCompression.js.map +1 -0
  41. package/dist/locales/de.json +7 -4
  42. package/dist/locales/en.json +8 -5
  43. package/dist/locales/es.json +7 -4
  44. package/dist/locales/fr.json +7 -4
  45. package/dist/locales/it.json +8 -5
  46. package/dist/styles.css +1 -2
  47. package/esm/components/Chat/Chat.css +37 -3
  48. package/esm/components/Chat/Chat.js +60 -22
  49. package/esm/components/Chat/Chat.js.map +1 -1
  50. package/esm/components/ChatBubble/ChatBubble.css +9 -5
  51. package/esm/components/ChatBubble/ChatBubble.js +54 -11
  52. package/esm/components/ChatBubble/ChatBubble.js.map +1 -1
  53. package/esm/components/ChatInputs/ChatInputs.css +293 -17
  54. package/esm/components/ChatInputs/ChatInputs.js +42 -26
  55. package/esm/components/ChatInputs/ChatInputs.js.map +1 -1
  56. package/esm/components/ChatTextArea/ChatTextArea.css +75 -31
  57. package/esm/components/ChatTextArea/ChatTextArea.js +49 -20
  58. package/esm/components/ChatTextArea/ChatTextArea.js.map +1 -1
  59. package/esm/components/FilePreview/FilePreview.css +225 -146
  60. package/esm/components/FilePreview/FilePreview.d.ts +1 -2
  61. package/esm/components/FilePreview/FilePreview.js +21 -7
  62. package/esm/components/FilePreview/FilePreview.js.map +1 -1
  63. package/esm/components/Header/Header.css +2 -2
  64. package/esm/components/MediaWidget/MediaItemWidget.js +2 -1
  65. package/esm/components/MediaWidget/MediaItemWidget.js.map +1 -1
  66. package/esm/components/MediaWidget/MediaWidget.css +0 -4
  67. package/esm/components/MemoriWidget/MemoriWidget.css +11 -2
  68. package/esm/components/MemoriWidget/MemoriWidget.js +41 -5
  69. package/esm/components/MemoriWidget/MemoriWidget.js.map +1 -1
  70. package/esm/components/MicrophoneButton/MicrophoneButton.css +2 -2
  71. package/esm/components/StartPanel/StartPanel.css +8 -0
  72. package/esm/components/UploadButton/UploadButton.css +20 -17
  73. package/esm/components/UploadButton/UploadButton.js +219 -90
  74. package/esm/components/UploadButton/UploadButton.js.map +1 -1
  75. package/esm/components/UploadButton/UploadDocuments/UploadDocuments.js +14 -4
  76. package/esm/components/UploadButton/UploadDocuments/UploadDocuments.js.map +1 -1
  77. package/esm/components/UploadButton/UploadImages/UploadImages.js +143 -16
  78. package/esm/components/UploadButton/UploadImages/UploadImages.js.map +1 -1
  79. package/esm/components/layouts/chat.css +1 -1
  80. package/esm/helpers/constants.d.ts +1 -0
  81. package/esm/helpers/constants.js +1 -0
  82. package/esm/helpers/constants.js.map +1 -1
  83. package/esm/helpers/imageCompression.d.ts +7 -0
  84. package/esm/helpers/imageCompression.js +119 -0
  85. package/esm/helpers/imageCompression.js.map +1 -0
  86. package/esm/locales/de.json +7 -4
  87. package/esm/locales/en.json +8 -5
  88. package/esm/locales/es.json +7 -4
  89. package/esm/locales/fr.json +7 -4
  90. package/esm/locales/it.json +8 -5
  91. package/esm/styles.css +1 -2
  92. package/package.json +1 -1
  93. package/src/components/Chat/Chat.css +37 -3
  94. package/src/components/Chat/Chat.tsx +89 -21
  95. package/src/components/Chat/__snapshots__/Chat.test.tsx.snap +672 -732
  96. package/src/components/ChatBubble/ChatBubble.css +9 -5
  97. package/src/components/ChatBubble/ChatBubble.tsx +111 -20
  98. package/src/components/ChatBubble/__snapshots__/ChatBubble.test.tsx.snap +4 -4
  99. package/src/components/ChatInputs/ChatInputs.css +293 -17
  100. package/src/components/ChatInputs/ChatInputs.tsx +144 -87
  101. package/src/components/ChatInputs/__snapshots__/ChatInputs.test.tsx.snap +430 -424
  102. package/src/components/ChatTextArea/ChatTextArea.css +75 -31
  103. package/src/components/ChatTextArea/ChatTextArea.test.tsx +1 -16
  104. package/src/components/ChatTextArea/ChatTextArea.tsx +51 -22
  105. package/src/components/ChatTextArea/__snapshots__/ChatTextArea.test.tsx.snap +9 -72
  106. package/src/components/FilePreview/FilePreview.css +225 -146
  107. package/src/components/FilePreview/FilePreview.tsx +49 -36
  108. package/src/components/FilePreview/__snapshots__/FilePreview.test.tsx.snap +2 -2
  109. package/src/components/Header/Header.css +2 -2
  110. package/src/components/MediaWidget/MediaItemWidget.tsx +2 -1
  111. package/src/components/MediaWidget/MediaWidget.css +0 -4
  112. package/src/components/MemoriWidget/MemoriWidget.css +11 -2
  113. package/src/components/MemoriWidget/MemoriWidget.tsx +61 -12
  114. package/src/components/MicrophoneButton/MicrophoneButton.css +2 -2
  115. package/src/components/StartPanel/StartPanel.css +8 -0
  116. package/src/components/UploadButton/UploadButton.css +20 -17
  117. package/src/components/UploadButton/UploadButton.stories.tsx +247 -35
  118. package/src/components/UploadButton/UploadButton.tsx +280 -175
  119. package/src/components/UploadButton/UploadDocuments/UploadDocuments.tsx +19 -4
  120. package/src/components/UploadButton/UploadImages/UploadImages.tsx +195 -35
  121. package/src/components/UploadButton/__snapshots__/UploadButton.test.tsx.snap +10 -1
  122. package/src/components/layouts/chat.css +1 -1
  123. package/src/helpers/constants.ts +1 -1
  124. package/src/helpers/imageCompression.ts +230 -0
  125. package/src/locales/de.json +7 -4
  126. package/src/locales/en.json +8 -5
  127. package/src/locales/es.json +7 -4
  128. package/src/locales/fr.json +7 -4
  129. package/src/locales/it.json +8 -5
  130. package/src/styles.css +1 -2
  131. package/src/components/UploadMenu/UploadMenu.css +0 -47
  132. package/src/components/UploadMenu/UploadMenu.stories.tsx +0 -66
  133. package/src/components/UploadMenu/UploadMenu.test.tsx +0 -34
  134. package/src/components/UploadMenu/UploadMenu.tsx +0 -68
  135. package/src/components/UploadMenu/__snapshots__/UploadMenu.test.tsx.snap +0 -137
package/src/components/ChatInputs/__snapshots__/ChatInputs.test.tsx.snap CHANGED
@@ -2,600 +2,606 @@
2
2
 
3
3
  exports[`renders ChatInputs disabled unchanged 1`] = `
4
4
  <div>
5
- <fieldset
6
- class="memori-chat-inputs"
7
- disabled=""
8
- id="chat-fieldset"
5
+ <div
6
+ class="memori-chat-inputs-wrapper"
9
7
  >
10
- <div
11
- class="memori-chat-textarea memori-chat-textarea--disabled"
12
- data-testid="chat-textarea"
8
+ <fieldset
9
+ class="memori-chat-inputs"
10
+ disabled=""
11
+ id="chat-fieldset"
13
12
  >
14
13
  <div
15
- class="memori-chat-textarea--inner"
14
+ class="memori-chat-inputs--container"
16
15
  >
17
- <textarea
18
- class="memori-chat-textarea--input"
19
- disabled=""
20
- maxlength="100000"
21
- >
22
- Lorem ipsum
23
- </textarea>
24
16
  <div
25
- class="memori-chat-textarea--expand"
17
+ class="memori-chat-inputs--leading"
18
+ />
19
+ <div
20
+ class="memori-chat-inputs--primary"
26
21
  >
27
- <button
28
- class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
29
- title="expand"
22
+ <div
23
+ class="memori-chat-textarea memori-chat-textarea--disabled"
24
+ data-testid="chat-textarea"
30
25
  >
31
- <span
32
- class="memori-button--icon"
26
+ <div
27
+ class="memori-chat-textarea--inner"
28
+ style="height: 36px;"
33
29
  >
34
- <svg
35
- aria-hidden="true"
36
- focusable="false"
37
- role="img"
38
- viewBox="0 0 1024 1024"
39
- xmlns="http://www.w3.org/2000/svg"
30
+ <textarea
31
+ class="memori-chat-textarea--input"
32
+ disabled=""
33
+ maxlength="100000"
34
+ placeholder="placeholder"
35
+ style="height: 36px;"
40
36
  >
41
- <path
42
- d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
43
- />
44
- </svg>
45
- </span>
46
- </button>
37
+ Lorem ipsum
38
+ </textarea>
39
+ </div>
40
+ </div>
47
41
  </div>
48
- </div>
49
- </div>
50
- <button
51
- class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
52
- title="send"
53
- >
54
- <span
55
- class="memori-button--icon"
56
- >
57
- <svg
58
- aria-hidden="true"
59
- focusable="false"
60
- role="img"
61
- viewBox="0 0 1024 1024"
62
- xmlns="http://www.w3.org/2000/svg"
42
+ <div
43
+ class="memori-chat-inputs--trailing"
63
44
  >
64
- <path
65
- d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
66
- />
67
- </svg>
68
- </span>
69
- </button>
70
- <div
71
- class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
72
- >
73
- <div
74
- class="memori-tooltip--content"
75
- >
76
- <span>
77
- write_and_speak.pressAndHoldToSpeak
78
- </span>
79
- </div>
80
- <div
81
- class="memori-tooltip--trigger"
82
- >
83
- <div>
84
- <button
85
- class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
86
- title="write_and_speak.micButtonPopover"
45
+ <div
46
+ class="memori-chat-inputs--trailing-inner"
87
47
  >
88
- <span
89
- class="memori-button--icon"
48
+ <div
49
+ class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
50
+ >
51
+ <div
52
+ class="memori-tooltip--content"
53
+ >
54
+ <span>
55
+ write_and_speak.pressAndHoldToSpeak
56
+ </span>
57
+ </div>
58
+ <div
59
+ class="memori-tooltip--trigger"
60
+ >
61
+ <div>
62
+ <button
63
+ class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
64
+ title="write_and_speak.micButtonPopover"
65
+ >
66
+ <span
67
+ class="memori-button--icon"
68
+ >
69
+ <svg
70
+ aria-hidden="true"
71
+ focusable="false"
72
+ role="img"
73
+ viewBox="0 0 1024 1024"
74
+ xmlns="http://www.w3.org/2000/svg"
75
+ >
76
+ <path
77
+ d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
78
+ />
79
+ </svg>
80
+ </span>
81
+ </button>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ <button
86
+ aria-label="send"
87
+ class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--active"
88
+ title="send"
89
+ type="button"
90
90
  >
91
91
  <svg
92
92
  aria-hidden="true"
93
+ class="icon"
93
94
  focusable="false"
94
95
  role="img"
95
96
  viewBox="0 0 1024 1024"
96
97
  xmlns="http://www.w3.org/2000/svg"
97
98
  >
98
99
  <path
99
- d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
100
+ d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
100
101
  />
101
102
  </svg>
102
- </span>
103
- </button>
103
+ </button>
104
+ </div>
104
105
  </div>
105
106
  </div>
106
- </div>
107
- </fieldset>
107
+ </fieldset>
108
+ </div>
108
109
  </div>
109
110
  `;
110
111
 
111
112
  exports[`renders ChatInputs listening unchanged 1`] = `
112
113
  <div>
113
- <fieldset
114
- class="memori-chat-inputs"
115
- id="chat-fieldset"
114
+ <div
115
+ class="memori-chat-inputs-wrapper"
116
116
  >
117
- <div
118
- class="memori-chat-textarea"
119
- data-testid="chat-textarea"
117
+ <fieldset
118
+ class="memori-chat-inputs"
119
+ id="chat-fieldset"
120
120
  >
121
121
  <div
122
- class="memori-chat-textarea--inner"
122
+ class="memori-chat-inputs--container"
123
123
  >
124
- <textarea
125
- class="memori-chat-textarea--input"
126
- maxlength="100000"
127
- >
128
- Lorem ipsum
129
- </textarea>
130
124
  <div
131
- class="memori-chat-textarea--expand"
125
+ class="memori-chat-inputs--leading"
126
+ />
127
+ <div
128
+ class="memori-chat-inputs--primary"
132
129
  >
133
- <button
134
- class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
135
- title="expand"
130
+ <div
131
+ class="memori-chat-textarea"
132
+ data-testid="chat-textarea"
136
133
  >
137
- <span
138
- class="memori-button--icon"
134
+ <div
135
+ class="memori-chat-textarea--inner"
136
+ style="height: 36px;"
139
137
  >
140
- <svg
141
- aria-hidden="true"
142
- focusable="false"
143
- role="img"
144
- viewBox="0 0 1024 1024"
145
- xmlns="http://www.w3.org/2000/svg"
138
+ <textarea
139
+ class="memori-chat-textarea--input"
140
+ maxlength="100000"
141
+ placeholder="placeholder"
142
+ style="height: 36px;"
146
143
  >
147
- <path
148
- d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
149
- />
150
- </svg>
151
- </span>
152
- </button>
144
+ Lorem ipsum
145
+ </textarea>
146
+ </div>
147
+ </div>
153
148
  </div>
154
- </div>
155
- </div>
156
- <button
157
- class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
158
- title="send"
159
- >
160
- <span
161
- class="memori-button--icon"
162
- >
163
- <svg
164
- aria-hidden="true"
165
- focusable="false"
166
- role="img"
167
- viewBox="0 0 1024 1024"
168
- xmlns="http://www.w3.org/2000/svg"
149
+ <div
150
+ class="memori-chat-inputs--trailing"
169
151
  >
170
- <path
171
- d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
172
- />
173
- </svg>
174
- </span>
175
- </button>
176
- <div
177
- class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
178
- >
179
- <div
180
- class="memori-tooltip--content"
181
- >
182
- <span>
183
- write_and_speak.pressAndHoldToSpeak
184
- </span>
185
- </div>
186
- <div
187
- class="memori-tooltip--trigger"
188
- >
189
- <div>
190
- <button
191
- class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic memori-chat-inputs--mic--listening"
192
- title="write_and_speak.micButtonPopoverListening"
152
+ <div
153
+ class="memori-chat-inputs--trailing-inner"
193
154
  >
194
- <span
195
- class="memori-button--icon"
155
+ <div
156
+ class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
157
+ >
158
+ <div
159
+ class="memori-tooltip--content"
160
+ >
161
+ <span>
162
+ write_and_speak.pressAndHoldToSpeak
163
+ </span>
164
+ </div>
165
+ <div
166
+ class="memori-tooltip--trigger"
167
+ >
168
+ <div>
169
+ <button
170
+ class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic memori-chat-inputs--mic--listening"
171
+ title="write_and_speak.micButtonPopoverListening"
172
+ >
173
+ <span
174
+ class="memori-button--icon"
175
+ >
176
+ <svg
177
+ aria-hidden="true"
178
+ focusable="false"
179
+ role="img"
180
+ viewBox="0 0 1024 1024"
181
+ xmlns="http://www.w3.org/2000/svg"
182
+ >
183
+ <path
184
+ d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
185
+ />
186
+ </svg>
187
+ </span>
188
+ </button>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ <button
193
+ aria-label="send"
194
+ class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--active"
195
+ title="send"
196
+ type="button"
196
197
  >
197
198
  <svg
198
199
  aria-hidden="true"
200
+ class="icon"
199
201
  focusable="false"
200
202
  role="img"
201
203
  viewBox="0 0 1024 1024"
202
204
  xmlns="http://www.w3.org/2000/svg"
203
205
  >
204
206
  <path
205
- d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
207
+ d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
206
208
  />
207
209
  </svg>
208
- </span>
209
- </button>
210
+ </button>
211
+ </div>
210
212
  </div>
211
213
  </div>
212
- </div>
213
- </fieldset>
214
+ </fieldset>
215
+ </div>
214
216
  </div>
215
217
  `;
216
218
 
217
219
  exports[`renders ChatInputs on instruct unchanged 1`] = `
218
220
  <div>
219
- <fieldset
220
- class="memori-chat-inputs"
221
- id="chat-fieldset"
221
+ <div
222
+ class="memori-chat-inputs-wrapper"
222
223
  >
223
- <div
224
- class="memori-chat-textarea"
225
- data-testid="chat-textarea"
224
+ <fieldset
225
+ class="memori-chat-inputs"
226
+ id="chat-fieldset"
226
227
  >
227
228
  <div
228
- class="memori-chat-textarea--inner"
229
+ class="memori-chat-inputs--container"
229
230
  >
230
- <textarea
231
- class="memori-chat-textarea--input"
232
- maxlength="100000"
233
- >
234
- Lorem ipsum
235
- </textarea>
236
231
  <div
237
- class="memori-chat-textarea--expand"
232
+ class="memori-chat-inputs--leading"
233
+ />
234
+ <div
235
+ class="memori-chat-inputs--primary"
238
236
  >
239
- <button
240
- class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
241
- title="expand"
237
+ <div
238
+ class="memori-chat-textarea"
239
+ data-testid="chat-textarea"
242
240
  >
243
- <span
244
- class="memori-button--icon"
241
+ <div
242
+ class="memori-chat-textarea--inner"
243
+ style="height: 36px;"
245
244
  >
246
- <svg
247
- aria-hidden="true"
248
- focusable="false"
249
- role="img"
250
- viewBox="0 0 1024 1024"
251
- xmlns="http://www.w3.org/2000/svg"
245
+ <textarea
246
+ class="memori-chat-textarea--input"
247
+ maxlength="100000"
248
+ placeholder="placeholder"
249
+ style="height: 36px;"
252
250
  >
253
- <path
254
- d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
255
- />
256
- </svg>
257
- </span>
258
- </button>
251
+ Lorem ipsum
252
+ </textarea>
253
+ </div>
254
+ </div>
259
255
  </div>
260
- </div>
261
- </div>
262
- <button
263
- class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
264
- title="send"
265
- >
266
- <span
267
- class="memori-button--icon"
268
- >
269
- <svg
270
- aria-hidden="true"
271
- focusable="false"
272
- role="img"
273
- viewBox="0 0 1024 1024"
274
- xmlns="http://www.w3.org/2000/svg"
256
+ <div
257
+ class="memori-chat-inputs--trailing"
275
258
  >
276
- <path
277
- d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
278
- />
279
- </svg>
280
- </span>
281
- </button>
282
- <div
283
- class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
284
- >
285
- <div
286
- class="memori-tooltip--content"
287
- >
288
- <span>
289
- write_and_speak.pressAndHoldToSpeak
290
- </span>
291
- </div>
292
- <div
293
- class="memori-tooltip--trigger"
294
- >
295
- <div>
296
- <button
297
- class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
298
- title="write_and_speak.micButtonPopover"
259
+ <div
260
+ class="memori-chat-inputs--trailing-inner"
299
261
  >
300
- <span
301
- class="memori-button--icon"
262
+ <div
263
+ class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
264
+ >
265
+ <div
266
+ class="memori-tooltip--content"
267
+ >
268
+ <span>
269
+ write_and_speak.pressAndHoldToSpeak
270
+ </span>
271
+ </div>
272
+ <div
273
+ class="memori-tooltip--trigger"
274
+ >
275
+ <div>
276
+ <button
277
+ class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
278
+ title="write_and_speak.micButtonPopover"
279
+ >
280
+ <span
281
+ class="memori-button--icon"
282
+ >
283
+ <svg
284
+ aria-hidden="true"
285
+ focusable="false"
286
+ role="img"
287
+ viewBox="0 0 1024 1024"
288
+ xmlns="http://www.w3.org/2000/svg"
289
+ >
290
+ <path
291
+ d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
292
+ />
293
+ </svg>
294
+ </span>
295
+ </button>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ <button
300
+ aria-label="send"
301
+ class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--active"
302
+ title="send"
303
+ type="button"
302
304
  >
303
305
  <svg
304
306
  aria-hidden="true"
307
+ class="icon"
305
308
  focusable="false"
306
309
  role="img"
307
310
  viewBox="0 0 1024 1024"
308
311
  xmlns="http://www.w3.org/2000/svg"
309
312
  >
310
313
  <path
311
- d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
314
+ d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
312
315
  />
313
316
  </svg>
314
- </span>
315
- </button>
317
+ </button>
318
+ </div>
316
319
  </div>
317
320
  </div>
318
- </div>
319
- </fieldset>
321
+ </fieldset>
322
+ </div>
320
323
  </div>
321
324
  `;
322
325
 
323
326
  exports[`renders ChatInputs unchanged 1`] = `
324
327
  <div>
325
- <fieldset
326
- class="memori-chat-inputs"
327
- id="chat-fieldset"
328
+ <div
329
+ class="memori-chat-inputs-wrapper"
328
330
  >
329
- <div
330
- class="memori-chat-textarea"
331
- data-testid="chat-textarea"
331
+ <fieldset
332
+ class="memori-chat-inputs"
333
+ id="chat-fieldset"
332
334
  >
333
335
  <div
334
- class="memori-chat-textarea--inner"
336
+ class="memori-chat-inputs--container"
335
337
  >
336
- <textarea
337
- class="memori-chat-textarea--input"
338
- maxlength="100000"
338
+ <div
339
+ class="memori-chat-inputs--leading"
339
340
  />
340
341
  <div
341
- class="memori-chat-textarea--expand"
342
+ class="memori-chat-inputs--primary"
342
343
  >
343
- <button
344
- class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
345
- title="expand"
344
+ <div
345
+ class="memori-chat-textarea"
346
+ data-testid="chat-textarea"
346
347
  >
347
- <span
348
- class="memori-button--icon"
348
+ <div
349
+ class="memori-chat-textarea--inner"
350
+ style="height: 36px;"
349
351
  >
350
- <svg
351
- aria-hidden="true"
352
- focusable="false"
353
- role="img"
354
- viewBox="0 0 1024 1024"
355
- xmlns="http://www.w3.org/2000/svg"
356
- >
357
- <path
358
- d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
359
- />
360
- </svg>
361
- </span>
362
- </button>
352
+ <textarea
353
+ class="memori-chat-textarea--input"
354
+ maxlength="100000"
355
+ placeholder="placeholder"
356
+ style="height: 36px;"
357
+ />
358
+ </div>
359
+ </div>
363
360
  </div>
364
- </div>
365
- </div>
366
- <button
367
- class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
368
- disabled=""
369
- title="send"
370
- >
371
- <span
372
- class="memori-button--icon"
373
- >
374
- <svg
375
- aria-hidden="true"
376
- focusable="false"
377
- role="img"
378
- viewBox="0 0 1024 1024"
379
- xmlns="http://www.w3.org/2000/svg"
361
+ <div
362
+ class="memori-chat-inputs--trailing"
380
363
  >
381
- <path
382
- d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
383
- />
384
- </svg>
385
- </span>
386
- </button>
387
- <div
388
- class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
389
- >
390
- <div
391
- class="memori-tooltip--content"
392
- >
393
- <span>
394
- write_and_speak.pressAndHoldToSpeak
395
- </span>
396
- </div>
397
- <div
398
- class="memori-tooltip--trigger"
399
- >
400
- <div>
401
- <button
402
- class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
403
- title="write_and_speak.micButtonPopover"
364
+ <div
365
+ class="memori-chat-inputs--trailing-inner"
404
366
  >
405
- <span
406
- class="memori-button--icon"
367
+ <div
368
+ class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
369
+ >
370
+ <div
371
+ class="memori-tooltip--content"
372
+ >
373
+ <span>
374
+ write_and_speak.pressAndHoldToSpeak
375
+ </span>
376
+ </div>
377
+ <div
378
+ class="memori-tooltip--trigger"
379
+ >
380
+ <div>
381
+ <button
382
+ class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
383
+ title="write_and_speak.micButtonPopover"
384
+ >
385
+ <span
386
+ class="memori-button--icon"
387
+ >
388
+ <svg
389
+ aria-hidden="true"
390
+ focusable="false"
391
+ role="img"
392
+ viewBox="0 0 1024 1024"
393
+ xmlns="http://www.w3.org/2000/svg"
394
+ >
395
+ <path
396
+ d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
397
+ />
398
+ </svg>
399
+ </span>
400
+ </button>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ <button
405
+ aria-label="send"
406
+ class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--disabled"
407
+ disabled=""
408
+ title="send"
409
+ type="button"
407
410
  >
408
411
  <svg
409
412
  aria-hidden="true"
413
+ class="icon"
410
414
  focusable="false"
411
415
  role="img"
412
416
  viewBox="0 0 1024 1024"
413
417
  xmlns="http://www.w3.org/2000/svg"
414
418
  >
415
419
  <path
416
- d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
420
+ d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
417
421
  />
418
422
  </svg>
419
- </span>
420
- </button>
423
+ </button>
424
+ </div>
421
425
  </div>
422
426
  </div>
423
- </div>
424
- </fieldset>
427
+ </fieldset>
428
+ </div>
425
429
  </div>
426
430
  `;
427
431
 
428
432
  exports[`renders ChatInputs with user message unchanged 1`] = `
429
433
  <div>
430
- <fieldset
431
- class="memori-chat-inputs"
432
- id="chat-fieldset"
434
+ <div
435
+ class="memori-chat-inputs-wrapper"
433
436
  >
434
- <div
435
- class="memori-chat-textarea"
436
- data-testid="chat-textarea"
437
+ <fieldset
438
+ class="memori-chat-inputs"
439
+ id="chat-fieldset"
437
440
  >
438
441
  <div
439
- class="memori-chat-textarea--inner"
442
+ class="memori-chat-inputs--container"
440
443
  >
441
- <textarea
442
- class="memori-chat-textarea--input"
443
- maxlength="100000"
444
- >
445
- Lorem ipsum
446
- </textarea>
447
444
  <div
448
- class="memori-chat-textarea--expand"
445
+ class="memori-chat-inputs--leading"
446
+ />
447
+ <div
448
+ class="memori-chat-inputs--primary"
449
449
  >
450
- <button
451
- class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
452
- title="expand"
450
+ <div
451
+ class="memori-chat-textarea"
452
+ data-testid="chat-textarea"
453
453
  >
454
- <span
455
- class="memori-button--icon"
454
+ <div
455
+ class="memori-chat-textarea--inner"
456
+ style="height: 36px;"
456
457
  >
457
- <svg
458
- aria-hidden="true"
459
- focusable="false"
460
- role="img"
461
- viewBox="0 0 1024 1024"
462
- xmlns="http://www.w3.org/2000/svg"
458
+ <textarea
459
+ class="memori-chat-textarea--input"
460
+ maxlength="100000"
461
+ placeholder="placeholder"
462
+ style="height: 36px;"
463
463
  >
464
- <path
465
- d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
466
- />
467
- </svg>
468
- </span>
469
- </button>
464
+ Lorem ipsum
465
+ </textarea>
466
+ </div>
467
+ </div>
470
468
  </div>
471
- </div>
472
- </div>
473
- <button
474
- class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
475
- title="send"
476
- >
477
- <span
478
- class="memori-button--icon"
479
- >
480
- <svg
481
- aria-hidden="true"
482
- focusable="false"
483
- role="img"
484
- viewBox="0 0 1024 1024"
485
- xmlns="http://www.w3.org/2000/svg"
469
+ <div
470
+ class="memori-chat-inputs--trailing"
486
471
  >
487
- <path
488
- d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
489
- />
490
- </svg>
491
- </span>
492
- </button>
493
- <div
494
- class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
495
- >
496
- <div
497
- class="memori-tooltip--content"
498
- >
499
- <span>
500
- write_and_speak.pressAndHoldToSpeak
501
- </span>
502
- </div>
503
- <div
504
- class="memori-tooltip--trigger"
505
- >
506
- <div>
507
- <button
508
- class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
509
- title="write_and_speak.micButtonPopover"
472
+ <div
473
+ class="memori-chat-inputs--trailing-inner"
510
474
  >
511
- <span
512
- class="memori-button--icon"
475
+ <div
476
+ class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
477
+ >
478
+ <div
479
+ class="memori-tooltip--content"
480
+ >
481
+ <span>
482
+ write_and_speak.pressAndHoldToSpeak
483
+ </span>
484
+ </div>
485
+ <div
486
+ class="memori-tooltip--trigger"
487
+ >
488
+ <div>
489
+ <button
490
+ class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
491
+ title="write_and_speak.micButtonPopover"
492
+ >
493
+ <span
494
+ class="memori-button--icon"
495
+ >
496
+ <svg
497
+ aria-hidden="true"
498
+ focusable="false"
499
+ role="img"
500
+ viewBox="0 0 1024 1024"
501
+ xmlns="http://www.w3.org/2000/svg"
502
+ >
503
+ <path
504
+ d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
505
+ />
506
+ </svg>
507
+ </span>
508
+ </button>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ <button
513
+ aria-label="send"
514
+ class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--active"
515
+ title="send"
516
+ type="button"
513
517
  >
514
518
  <svg
515
519
  aria-hidden="true"
520
+ class="icon"
516
521
  focusable="false"
517
522
  role="img"
518
523
  viewBox="0 0 1024 1024"
519
524
  xmlns="http://www.w3.org/2000/svg"
520
525
  >
521
526
  <path
522
- d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
527
+ d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
523
528
  />
524
529
  </svg>
525
- </span>
526
- </button>
530
+ </button>
531
+ </div>
527
532
  </div>
528
533
  </div>
529
- </div>
530
- </fieldset>
534
+ </fieldset>
535
+ </div>
531
536
  </div>
532
537
  `;
533
538
 
534
539
  exports[`renders ChatInputs without microphone button unchanged 1`] = `
535
540
  <div>
536
- <fieldset
537
- class="memori-chat-inputs"
538
- id="chat-fieldset"
541
+ <div
542
+ class="memori-chat-inputs-wrapper"
539
543
  >
540
- <div
541
- class="memori-chat-textarea"
542
- data-testid="chat-textarea"
544
+ <fieldset
545
+ class="memori-chat-inputs"
546
+ id="chat-fieldset"
543
547
  >
544
548
  <div
545
- class="memori-chat-textarea--inner"
549
+ class="memori-chat-inputs--container"
546
550
  >
547
- <textarea
548
- class="memori-chat-textarea--input"
549
- maxlength="100000"
551
+ <div
552
+ class="memori-chat-inputs--leading"
553
+ />
554
+ <div
555
+ class="memori-chat-inputs--primary"
550
556
  >
551
- Lorem ipsum
552
- </textarea>
557
+ <div
558
+ class="memori-chat-textarea"
559
+ data-testid="chat-textarea"
560
+ >
561
+ <div
562
+ class="memori-chat-textarea--inner"
563
+ style="height: 36px;"
564
+ >
565
+ <textarea
566
+ class="memori-chat-textarea--input"
567
+ maxlength="100000"
568
+ placeholder="placeholder"
569
+ style="height: 36px;"
570
+ >
571
+ Lorem ipsum
572
+ </textarea>
573
+ </div>
574
+ </div>
575
+ </div>
553
576
  <div
554
- class="memori-chat-textarea--expand"
577
+ class="memori-chat-inputs--trailing"
555
578
  >
556
- <button
557
- class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
558
- title="expand"
579
+ <div
580
+ class="memori-chat-inputs--trailing-inner"
559
581
  >
560
- <span
561
- class="memori-button--icon"
582
+ <button
583
+ aria-label="send"
584
+ class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--active"
585
+ title="send"
586
+ type="button"
562
587
  >
563
588
  <svg
564
589
  aria-hidden="true"
590
+ class="icon"
565
591
  focusable="false"
566
592
  role="img"
567
593
  viewBox="0 0 1024 1024"
568
594
  xmlns="http://www.w3.org/2000/svg"
569
595
  >
570
596
  <path
571
- d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
597
+ d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
572
598
  />
573
599
  </svg>
574
- </span>
575
- </button>
600
+ </button>
601
+ </div>
576
602
  </div>
577
603
  </div>
578
- </div>
579
- <button
580
- class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
581
- title="send"
582
- >
583
- <span
584
- class="memori-button--icon"
585
- >
586
- <svg
587
- aria-hidden="true"
588
- focusable="false"
589
- role="img"
590
- viewBox="0 0 1024 1024"
591
- xmlns="http://www.w3.org/2000/svg"
592
- >
593
- <path
594
- d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
595
- />
596
- </svg>
597
- </span>
598
- </button>
599
- </fieldset>
604
+ </fieldset>
605
+ </div>
600
606
  </div>
601
607
  `;