@dust-tt/sparkle 0.2.640 → 0.2.641-rc-1

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 (17) hide show
  1. package/dist/cjs/index.js +1 -1
  2. package/dist/esm/components/AssistantCard.d.ts +1 -1
  3. package/dist/esm/components/AssistantCard.d.ts.map +1 -1
  4. package/dist/esm/components/Citation.d.ts +1 -1
  5. package/dist/esm/components/Citation.d.ts.map +1 -1
  6. package/dist/esm/components/Citation.js +28 -13
  7. package/dist/esm/components/Citation.js.map +1 -1
  8. package/dist/esm/stories/Citation.stories.d.ts +1 -1
  9. package/dist/esm/stories/Citation.stories.d.ts.map +1 -1
  10. package/dist/esm/stories/Citation.stories.js +24 -25
  11. package/dist/esm/stories/Citation.stories.js.map +1 -1
  12. package/dist/esm/stories/InteractiveImageGrid.stories.d.ts +1 -1
  13. package/dist/sparkle.css +8 -14
  14. package/package.json +1 -1
  15. package/src/components/AssistantCard.tsx +1 -1
  16. package/src/components/Citation.tsx +69 -37
  17. package/src/stories/Citation.stories.tsx +44 -26
package/src/stories/Citation.stories.tsx CHANGED
@@ -8,7 +8,6 @@ import {
8
8
  CitationDescription,
9
9
  CitationGrid,
10
10
  CitationIcons,
11
- CitationImage,
12
11
  CitationIndex,
13
12
  CitationTitle,
14
13
  DocumentIcon,
@@ -17,6 +16,7 @@ import {
17
16
  GlobeAltIcon,
18
17
  Icon,
19
18
  ImageIcon,
19
+ Tooltip,
20
20
  NotionLogo,
21
21
  Popover,
22
22
  SlackLogo,
@@ -36,7 +36,6 @@ export const CitationsExample = () => (
36
36
  <CitationGrid>
37
37
  <Citation
38
38
  onClick={() => alert("Card clicked")}
39
- className="s-w-48"
40
39
  tooltip="@ed at 16:32 This is the latest ve"
41
40
  >
42
41
  <CitationIcons>
@@ -51,7 +50,6 @@ export const CitationsExample = () => (
51
50
  <CitationGrid>
52
51
  <Citation
53
52
  onClick={() => alert("Card clicked")}
54
- className="s-w-48"
55
53
  tooltip="@ed at 16:32 This is the latest ve"
56
54
  >
57
55
  <CitationIcons>
@@ -62,28 +60,35 @@ export const CitationsExample = () => (
62
60
  @ed at 16:32 This is the latest ve
63
61
  </CitationDescription>
64
62
  </Citation>
65
- <Citation onClick={() => alert("Card clicked")} className="s-w-48">
63
+ <Citation onClick={() => alert("Card clicked")}>
66
64
  <CitationIcons>
67
65
  <Icon visual={TableIcon} size="sm" />
68
66
  </CitationIcons>
69
67
  <CitationTitle>extract_financa.csv</CitationTitle>
70
68
  </Citation>
71
- <Citation onClick={() => alert("Card clicked")} className="s-w-48">
69
+ <Citation onClick={() => alert("Card clicked")}>
72
70
  <CitationIcons>
73
71
  <FaviconIcon websiteUrl="https://www.linkedin.com" size="sm" />
74
72
  </CitationIcons>
75
73
  <CitationTitle>Linkedin, Edouard Wautier</CitationTitle>
76
74
  </Citation>
77
-
78
- <Citation onClick={() => alert("Card clicked")} className="s-w-48">
75
+
76
+ <Citation onClick={() => alert("Card clicked")}>
79
77
  <CitationIcons>
80
78
  <FaviconIcon websiteUrl="https://github.com" size="sm" />
81
79
  </CitationIcons>
82
80
  <CitationTitle>GitHub Repository</CitationTitle>
83
81
  </Citation>
84
82
 
85
- <Citation onClick={() => alert("Card clicked")} className="s-w-48">
86
- <CitationImage imgSrc="https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" />
83
+ <Citation
84
+ onClick={() => alert("Card clicked")}
85
+ tooltip={
86
+ <img
87
+ src="https://dust.tt/static/droidavatar/Droid_Lime_3.jpg"
88
+ alt="screenshot.png"
89
+ />
90
+ }
91
+ >
87
92
  <CitationIcons>
88
93
  <Icon visual={ImageIcon} size="sm" />
89
94
  </CitationIcons>
@@ -133,17 +138,30 @@ export const CitationsExample = () => (
133
138
  <CitationTitle>Linkedin, Edouard Wautier</CitationTitle>
134
139
  </Citation>
135
140
 
136
- <Citation
137
- onClick={() => alert("Card clicked")}
138
- className="s-w-48"
139
- action={<CitationClose onClick={() => alert("Close clicked")} />}
140
- >
141
- <CitationImage imgSrc="https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" />
142
- <CitationIcons>
143
- <Icon visual={ImageIcon} size="sm" />
144
- </CitationIcons>
145
- <CitationTitle>screenshot.png</CitationTitle>
146
- </Citation>
141
+ <Tooltip
142
+ trigger={
143
+ <Citation
144
+ onClick={() => alert("Card clicked")}
145
+ className="s-w-48"
146
+ action={<CitationClose onClick={() => alert("Close clicked")} />}
147
+ >
148
+ <CitationIcons>
149
+ <Icon visual={ImageIcon} size="sm" />
150
+ </CitationIcons>
151
+ <CitationTitle>screenshot.png</CitationTitle>
152
+ </Citation>
153
+ }
154
+ label={
155
+ <div className="s-flex s-w-80 s-max-w-[80vw] s-flex-col s-gap-2">
156
+ {/* eslint-disable-next-line @next/next/no-img-element */}
157
+ <img
158
+ src="https://dust.tt/static/droidavatar/Droid_Lime_3.jpg"
159
+ alt="screenshot.png"
160
+ className="s-mx-auto s-max-h-40 s-w-full s-rounded-md s-object-contain"
161
+ />
162
+ </div>
163
+ }
164
+ />
147
165
  </CitationGrid>
148
166
  Example of citations in markdown
149
167
  <div>
@@ -152,8 +170,8 @@ export const CitationsExample = () => (
152
170
  content={
153
171
  <>
154
172
  <CitationIcons>
155
- <CitationIndex>1</CitationIndex>
156
173
  <Icon visual={SlackLogo} size="sm" />
174
+ <CitationIndex>1</CitationIndex>
157
175
  </CitationIcons>
158
176
  <CitationTitle>Hello</CitationTitle>
159
177
  <Button
@@ -169,36 +187,36 @@ export const CitationsExample = () => (
169
187
  <CitationGrid>
170
188
  <Citation onClick={() => alert("Card clicked")}>
171
189
  <CitationIcons>
172
- <CitationIndex>1</CitationIndex>
173
190
  <Icon visual={SlackLogo} size="sm" />
191
+ <CitationIndex>1</CitationIndex>
174
192
  </CitationIcons>
175
193
  <CitationTitle>Hello</CitationTitle>
176
194
  </Citation>
177
195
  <Citation onClick={() => alert("Close action clicked")}>
178
196
  <CitationIcons>
179
- <CitationIndex>2</CitationIndex>
180
197
  <Icon visual={NotionLogo} size="sm" />
198
+ <CitationIndex>2</CitationIndex>
181
199
  </CitationIcons>
182
200
  <CitationTitle>Hello</CitationTitle>
183
201
  </Citation>
184
202
  <Citation onClick={() => alert("Close action clicked")}>
185
203
  <CitationIcons>
186
- <CitationIndex>3</CitationIndex>
187
204
  <Icon visual={DocumentIcon} size="sm" />
205
+ <CitationIndex>3</CitationIndex>
188
206
  </CitationIcons>
189
207
  <CitationTitle>Hello</CitationTitle>
190
208
  </Citation>
191
209
  <Citation onClick={() => alert("Close action clicked")}>
192
210
  <CitationIcons>
193
- <CitationIndex>4</CitationIndex>
194
211
  <FaviconIcon websiteUrl="https://stackoverflow.com" size="sm" />
212
+ <CitationIndex>4</CitationIndex>
195
213
  </CitationIcons>
196
214
  <CitationTitle>Stack Overflow Answer</CitationTitle>
197
215
  </Citation>
198
216
  <Citation onClick={() => alert("Close action clicked")}>
199
217
  <CitationIcons>
200
- <CitationIndex>5</CitationIndex>
201
218
  <FaviconIcon websiteUrl="https://www.wikipedia.org" size="sm" />
219
+ <CitationIndex>5</CitationIndex>
202
220
  </CitationIcons>
203
221
  <CitationTitle>Wikipedia Article</CitationTitle>
204
222
  </Citation>