Skip to content

Commit fa92abc

Browse files
tjbcktjbck
committed
refac
1 parent b7aeb43 commit fa92abc

File tree

5 files changed

+126
-48
lines changed

5 files changed

+126
-48
lines changed

‎src/lib/components/chat/Messages/ContentRenderer.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
export let floatingButtons = true;
1919
2020
export let onSourceClick = () => {};
21+
export let onTaskClick = () => {};
22+
2123
export let onAddMessages = () => {};
2224
2325
let contentContainerElement;
@@ -141,6 +143,7 @@
141143
return acc.filter((item, index) => acc.indexOf(item) === index);
142144
}, [])}
143145
{onSourceClick}
146+
{onTaskClick}
144147
on:update={(e) => {
145148
dispatch('update', e.detail);
146149
}}

‎src/lib/components/chat/Messages/Markdown.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
export let save = false;
1818
1919
export let sourceIds = [];
20+
2021
export let onSourceClick = () => {};
22+
export let onTaskClick = () => {};
2123
2224
let tokens = [];
2325
@@ -45,6 +47,7 @@
4547
{tokens}
4648
{id}
4749
{save}
50+
{onTaskClick}
4851
{onSourceClick}
4952
on:update={(e) => {
5053
dispatch('update', e.detail);

‎src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@
2626
export let attributes = {};
2727
2828
export let save = false;
29+
30+
export let onTaskClick: Function = () => {};
2931
export let onSourceClick: Function = () => {};
3032
3133
const headerComponent = (depth: number) => {
@@ -168,17 +170,37 @@
168170
</div>
169171
{:else if token.type === 'blockquote'}
170172
<blockquote>
171-
<svelte:self id={`${id}-${tokenIdx}`} tokens={token.tokens} />
173+
<svelte:self id={`${id}-${tokenIdx}`} tokens={token.tokens} {onTaskClick} {onSourceClick} />
172174
</blockquote>
173175
{:else if token.type === 'list'}
174176
{#if token.ordered}
175177
<ol start={token.start || 1}>
176178
{#each token.items as item, itemIdx}
177179
<li>
180+
{#if item?.task}
181+
<input
182+
class=" translate-y-[1px] -translate-x-1"
183+
type="checkbox"
184+
checked={item.checked}
185+
on:change={(e) => {
186+
onTaskClick({
187+
id: id,
188+
token: token,
189+
tokenIdx: tokenIdx,
190+
item: item,
191+
itemIdx: itemIdx,
192+
checked: e.target.checked
193+
});
194+
}}
195+
/>
196+
{/if}
197+
178198
<svelte:self
179199
id={`${id}-${tokenIdx}-${itemIdx}`}
180200
tokens={item.tokens}
181201
top={token.loose}
202+
{onTaskClick}
203+
{onSourceClick}
182204
/>
183205
</li>
184206
{/each}
@@ -187,22 +209,49 @@
187209
<ul>
188210
{#each token.items as item, itemIdx}
189211
<li>
212+
{#if item?.task}
213+
<input
214+
class=" translate-y-[1px] -translate-x-1"
215+
type="checkbox"
216+
checked={item.checked}
217+
on:change={(e) => {
218+
onTaskClick({
219+
id: id,
220+
token: token,
221+
tokenIdx: tokenIdx,
222+
item: item,
223+
itemIdx: itemIdx,
224+
checked: e.target.checked
225+
});
226+
}}
227+
/>
228+
{/if}
229+
190230
<svelte:self
191231
id={`${id}-${tokenIdx}-${itemIdx}`}
192232
tokens={item.tokens}
193233
top={token.loose}
234+
{onTaskClick}
235+
{onSourceClick}
194236
/>
195237
</li>
196238
{/each}
197239
</ul>
198240
{/if}
241+
{:else if token.type === 'list_item'}
242+
{JSON.stringify(token)}
243+
<p>
244+
<MarkdownInlineTokens id={`${id}-${tokenIdx}-li`} tokens={token.tokens} {onSourceClick} />
245+
</p>
199246
{:else if token.type === 'details'}
200247
<Collapsible title={token.summary} attributes={token?.attributes} className="w-full space-y-1">
201248
<div class=" mb-1.5" slot="content">
202249
<svelte:self
203250
id={`${id}-${tokenIdx}-d`}
204251
tokens={marked.lexer(token.text)}
205252
attributes={token?.attributes}
253+
{onTaskClick}
254+
{onSourceClick}
206255
/>
207256
</div>
208257
</Collapsible>

‎src/lib/components/chat/Messages/ResponseMessage.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -716,6 +716,9 @@
716716
floatingButtons={message?.done}
717717
save={!readOnly}
718718
{model}
719+
onTaskClick={async (e) => {
720+
console.log(e);
721+
}}
719722
onSourceClick={async (e) => {
720723
console.log(e);
721724
let sourceButton = document.getElementById(`source-${e}`);

‎src/lib/components/common/RichTextInput.svelte‎

Lines changed: 67 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@
3535
export let value = '';
3636
export let id = '';
3737
38+
export let raw = false;
39+
3840
export let preserveBreaks = false;
3941
export let generateAutoCompletion: Function = async () => null;
4042
export let autocomplete = false;
@@ -137,25 +139,29 @@
137139
});
138140
}
139141
140-
async function tryParse(value, attempts = 3, interval = 100) {
141-
try {
142-
// Try parsing the value
143-
return marked.parse(value.replaceAll(`\n<br/>`, `<br/>`), {
144-
breaks: false
145-
});
146-
} catch (error) {
147-
// If no attempts remain, fallback to plain text
148-
if (attempts <= 1) {
149-
return value;
142+
let content = value;
143+
144+
if (!raw) {
145+
async function tryParse(value, attempts = 3, interval = 100) {
146+
try {
147+
// Try parsing the value
148+
return marked.parse(value.replaceAll(`\n<br/>`, `<br/>`), {
149+
breaks: false
150+
});
151+
} catch (error) {
152+
// If no attempts remain, fallback to plain text
153+
if (attempts <= 1) {
154+
return value;
155+
}
156+
// Wait for the interval, then retry
157+
await new Promise((resolve) => setTimeout(resolve, interval));
158+
return tryParse(value, attempts - 1, interval); // Recursive call
150159
}
151-
// Wait for the interval, then retry
152-
await new Promise((resolve) => setTimeout(resolve, interval));
153-
return tryParse(value, attempts - 1, interval); // Recursive call
154160
}
155-
}
156161
157-
// Usage example
158-
let content = await tryParse(value);
162+
// Usage example
163+
content = await tryParse(value);
164+
}
159165
160166
editor = new Editor({
161167
element: element,
@@ -191,28 +197,33 @@
191197
onTransaction: () => {
192198
// force re-render so `editor.isActive` works as expected
193199
editor = editor;
194-
let newValue = turndownService
195-
.turndown(
196-
editor
197-
.getHTML()
198-
.replace(/<p><\/p>/g, '<br/>')
199-
.replace(/ {2,}/g, (m) => m.replace(/ /g, '\u00a0'))
200-
)
201-
.replace(/\u00a0/g, ' ');
202200
203-
if (!preserveBreaks) {
204-
newValue = newValue.replace(/<br\/>/g, '');
205-
}
201+
if (!raw) {
202+
let newValue = turndownService
203+
.turndown(
204+
editor
205+
.getHTML()
206+
.replace(/<p><\/p>/g, '<br/>')
207+
.replace(/ {2,}/g, (m) => m.replace(/ /g, '\u00a0'))
208+
)
209+
.replace(/\u00a0/g, ' ');
210+
211+
if (!preserveBreaks) {
212+
newValue = newValue.replace(/<br\/>/g, '');
213+
}
206214
207-
if (value !== newValue) {
208-
value = newValue;
215+
if (value !== newValue) {
216+
value = newValue;
209217
210-
// check if the node is paragraph as well
211-
if (editor.isActive('paragraph')) {
212-
if (value === '') {
213-
editor.commands.clearContent();
218+
// check if the node is paragraph as well
219+
if (editor.isActive('paragraph')) {
220+
if (value === '') {
221+
editor.commands.clearContent();
222+
}
214223
}
215224
}
225+
} else {
226+
value = editor.getHTML();
216227
}
217228
},
218229
editorProps: {
@@ -340,21 +351,30 @@
340351
// Update the editor content if the external `value` changes
341352
$: if (
342353
editor &&
343-
value !==
344-
turndownService
345-
.turndown(
346-
(preserveBreaks
347-
? editor.getHTML().replace(/<p><\/p>/g, '<br/>')
348-
: editor.getHTML()
349-
).replace(/ {2,}/g, (m) => m.replace(/ /g, '\u00a0'))
350-
)
351-
.replace(/\u00a0/g, ' ')
354+
(raw
355+
? value !== editor.getHTML()
356+
: value !==
357+
turndownService
358+
.turndown(
359+
(preserveBreaks
360+
? editor.getHTML().replace(/<p><\/p>/g, '<br/>')
361+
: editor.getHTML()
362+
).replace(/ {2,}/g, (m) => m.replace(/ /g, '\u00a0'))
363+
)
364+
.replace(/\u00a0/g, ' '))
352365
) {
353-
editor.commands.setContent(
354-
marked.parse(value.replaceAll(`\n<br/>`, `<br/>`), {
355-
breaks: false
356-
})
357-
); // Update editor content
366+
if (raw) {
367+
editor.commands.setContent(value);
368+
} else {
369+
preserveBreaks
370+
? editor.commands.setContent(value)
371+
: editor.commands.setContent(
372+
marked.parse(value.replaceAll(`\n<br/>`, `<br/>`), {
373+
breaks: false
374+
})
375+
); // Update editor content
376+
}
377+
358378
selectTemplate();
359379
}
360380
</script>

0 commit comments

Comments
 (0)