refac

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

@@ -26,6 +26,8 @@
 	export let attributes = {};
 
 	export let save = false;
+
+	export let onTaskClick: Function = () => {};
 	export let onSourceClick: Function = () => {};
 
 	const headerComponent = (depth: number) => {
@@ -168,17 +170,37 @@
 		</div>
 	{:else if token.type === 'blockquote'}
 		<blockquote>
-			<svelte:self id={`${id}-${tokenIdx}`} tokens={token.tokens} />
+			<svelte:self id={`${id}-${tokenIdx}`} tokens={token.tokens} {onTaskClick} {onSourceClick} />
 		</blockquote>
 	{:else if token.type === 'list'}
 		{#if token.ordered}
 			<ol start={token.start || 1}>
 				{#each token.items as item, itemIdx}
 					<li>
+						{#if item?.task}
+							<input
+								class=" translate-y-[1px] -translate-x-1"
+								type="checkbox"
+								checked={item.checked}
+								on:change={(e) => {
+									onTaskClick({
+										id: id,
+										token: token,
+										tokenIdx: tokenIdx,
+										item: item,
+										itemIdx: itemIdx,
+										checked: e.target.checked
+									});
+								}}
+							/>
+						{/if}
+
 						<svelte:self
 							id={`${id}-${tokenIdx}-${itemIdx}`}
 							tokens={item.tokens}
 							top={token.loose}
+							{onTaskClick}
+							{onSourceClick}
 						/>
 					</li>
 				{/each}
@@ -187,15 +209,40 @@
 			<ul>
 				{#each token.items as item, itemIdx}
 					<li>
+						{#if item?.task}
+							<input
+								class=" translate-y-[1px] -translate-x-1"
+								type="checkbox"
+								checked={item.checked}
+								on:change={(e) => {
+									onTaskClick({
+										id: id,
+										token: token,
+										tokenIdx: tokenIdx,
+										item: item,
+										itemIdx: itemIdx,
+										checked: e.target.checked
+									});
+								}}
+							/>
+						{/if}
+
 						<svelte:self
 							id={`${id}-${tokenIdx}-${itemIdx}`}
 							tokens={item.tokens}
 							top={token.loose}
+							{onTaskClick}
+							{onSourceClick}
 						/>
 					</li>
 				{/each}
 			</ul>
 		{/if}
+	{:else if token.type === 'list_item'}
+		{JSON.stringify(token)}
+		<p>
+			<MarkdownInlineTokens id={`${id}-${tokenIdx}-li`} tokens={token.tokens} {onSourceClick} />
+		</p>
 	{:else if token.type === 'details'}
 		<Collapsible title={token.summary} attributes={token?.attributes} className="w-full space-y-1">
 			<div class=" mb-1.5" slot="content">
@@ -203,6 +250,8 @@
 					id={`${id}-${tokenIdx}-d`}
 					tokens={marked.lexer(token.text)}
 					attributes={token?.attributes}
+					{onTaskClick}
+					{onSourceClick}
 				/>
 			</div>
 		</Collapsible>