{#if treeData.nodes.length > 0} {@const nodeSize = 24} {@const iconSize = 18} {@const svgWidth = Math.max(treeData.width, 100)} {@const svgHeight = Math.max(treeData.height, 50)}
{#each treeData.nodes as node} {#if node.parentX !== undefined && node.parentY !== undefined} {@const parentNode = treeData.nodes.find(n => n.x === node.parentX && n.y === node.parentY)} {@const isMultiPersonaResponse = node.message.from === MessageRole.Assistant && node.message.personaResponses && node.message.personaResponses.length > 1} {@const parentIsUser = parentNode?.message.from === MessageRole.User} {#if parentIsUser && isMultiPersonaResponse && node.message.personaResponses} {@const personaCount = node.message.personaResponses.length} {@const spacing = 8} {@const totalWidth = personaCount * iconSize + (personaCount - 1) * spacing} {@const leftmostX = node.x + iconSize / 2} {@const rightmostX = leftmostX + (personaCount - 1) * (iconSize + spacing)} {@const childCenterX = node.x + totalWidth / 2} {@const junctionY = node.y - (node.y - node.parentY - nodeSize) * 0.25} {@const parentWidth = parentNode?.width || nodeSize} {@const parentCenterX = node.parentX + parentWidth / 2}
{#each node.message.personaResponses as persona, personaIndex} {@const dropX = leftmostX + personaIndex * (iconSize + spacing)}
{/each} {:else} {@const parentWidth = parentNode?.width || nodeSize} {@const parentCenterX = node.parentX + parentWidth / 2} {@const x1 = parentCenterX} {@const y1 = node.parentY + nodeSize} {@const x2 = node.x + nodeSize / 2} {@const y2 = node.y} {@const controlOffset = Math.abs(y2 - y1) * 0.3}
{/if} {/if} {/each} {#each treeData.nodes as node} {@const cx = node.x + nodeSize / 2} {@const cy = node.y + nodeSize / 2} {#if node.message.from === MessageRole.User}
onNodeClick(node.message.id)} onkeydown={(e) => e.key === 'Enter' && onNodeClick(node.message.id)} >
{:else if node.message.personaResponses && node.message.personaResponses.length > 0} {@const personaCount = node.message.personaResponses.length} {@const spacing = 8} {#if personaCount === 1}
onNodeClick(node.message.id)} onkeydown={(e) => e.key === 'Enter' && onNodeClick(node.message.id)} >
{:else} {@const totalWidth = personaCount * iconSize + (personaCount - 1) * spacing} {@const startX = node.x + iconSize / 2} {#each node.message.personaResponses as response, i} {@const iconX = startX + i * (iconSize + spacing)}
onNodeClick(node.message.id)} onkeydown={(e) => e.key === 'Enter' && onNodeClick(node.message.id)} >
{/each} {/if} {:else}
onNodeClick(node.message.id)} onkeydown={(e) => e.key === 'Enter' && onNodeClick(node.message.id)} >
{/if} {/each}
{/if}