|
| 1 | +<script lang="ts"> |
| 2 | + import { page } from '$app/state'; |
| 3 | + import { ChevronRight } from '@lucide/svelte'; |
| 4 | + import converter from '$lib/showdown'; |
| 5 | + import { chatCitationPattern } from '$lib/constants'; |
| 6 | + import { citationReplacer } from '$lib/utils'; |
| 7 | +
|
| 8 | + import References from './References.svelte'; |
| 9 | + import { ChatState } from '../../../routes/(main)/chat/chat.svelte'; |
| 10 | + import { TableState } from '$lib/components/tables/tablesState.svelte'; |
| 11 | + import CloseIcon from '$lib/icons/CloseIcon.svelte'; |
| 12 | +
|
| 13 | + let { |
| 14 | + showOutputDetails = $bindable() |
| 15 | + }: { |
| 16 | + showOutputDetails: TableState['showOutputDetails'] | ChatState['showOutputDetails']; |
| 17 | + } = $props(); |
| 18 | +
|
| 19 | + let tabItems = $derived( |
| 20 | + [ |
| 21 | + { |
| 22 | + id: 'answer', |
| 23 | + title: 'Answer', |
| 24 | + condition: true |
| 25 | + }, |
| 26 | + { |
| 27 | + id: 'thinking', |
| 28 | + title: 'Thinking', |
| 29 | + condition: !!showOutputDetails.reasoningContent |
| 30 | + }, |
| 31 | + { |
| 32 | + id: 'references', |
| 33 | + title: 'References', |
| 34 | + condition: (showOutputDetails.message?.chunks.length ?? 0) > 0 |
| 35 | + } |
| 36 | + ].filter((t) => t.condition) |
| 37 | + ); |
| 38 | + let tabHighlightPos = $derived( |
| 39 | + (tabItems.findIndex((t) => showOutputDetails.activeTab === t.id) / tabItems.length) * 100 |
| 40 | + ); |
| 41 | +
|
| 42 | + function handleCustomBtnClick(e: MouseEvent) { |
| 43 | + if (page.url.pathname.startsWith('/chat')) return; |
| 44 | +
|
| 45 | + const target = e.target as HTMLElement; |
| 46 | + if (target.classList.contains('citation-btn')) { |
| 47 | + const columnID = target.getAttribute('data-column'); |
| 48 | + const rowID = target.getAttribute('data-row'); |
| 49 | + const chunkID = target.getAttribute('data-citation'); |
| 50 | + if (columnID && rowID && chunkID) { |
| 51 | + showOutputDetails = { |
| 52 | + ...showOutputDetails, |
| 53 | + open: true, |
| 54 | + activeTab: 'references', |
| 55 | + expandChunk: chunkID, |
| 56 | + preview: null |
| 57 | + }; |
| 58 | + } |
| 59 | + } |
| 60 | + } |
| 61 | +</script> |
| 62 | + |
| 63 | +<svelte:document onclick={handleCustomBtnClick} /> |
| 64 | + |
| 65 | +<div class="z-[1] h-full pb-4 pl-3 pr-3 md:pl-0"> |
| 66 | + <div |
| 67 | + style="box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);" |
| 68 | + class="flex h-full flex-col rounded-lg border border-[#E4E7EC] bg-white" |
| 69 | + > |
| 70 | + <div |
| 71 | + class="relative flex h-min items-center justify-between space-y-1.5 rounded-t-lg bg-white px-4 py-3 text-left text-lg font-medium text-[#344054] data-dark:bg-[#303338]" |
| 72 | + > |
| 73 | + <!-- {#if showOutputDetails.preview} |
| 74 | + <div class="flex items-center gap-2"> |
| 75 | + <button |
| 76 | + onclick={() => (showOutputDetails = { ...showOutputDetails, preview: null })} |
| 77 | + class="flex aspect-square h-8 items-center justify-center rounded-full !bg-transparent ring-offset-background transition-colors hover:!bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-black" |
| 78 | + > |
| 79 | + <ArrowBackIcon class="w-6 [&>*]:stroke-[#1D2939]" /> |
| 80 | + </button> |
| 81 | +
|
| 82 | + <span class="line-clamp-1"> |
| 83 | + {showOutputDetails.preview.document_id.split('/').pop()} |
| 84 | + </span> |
| 85 | + </div> |
| 86 | + {:else} |
| 87 | + Citations |
| 88 | + {/if} --> |
| 89 | + Output details |
| 90 | + |
| 91 | + <button |
| 92 | + onclick={() => (showOutputDetails = { ...showOutputDetails, open: false, preview: null })} |
| 93 | + class="flex aspect-square h-8 items-center justify-center rounded-full !bg-transparent ring-offset-background transition-colors hover:!bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-black" |
| 94 | + > |
| 95 | + <CloseIcon class="w-6" /> |
| 96 | + <span class="sr-only">Close</span> |
| 97 | + </button> |
| 98 | + </div> |
| 99 | + |
| 100 | + <div |
| 101 | + data-testid="output-details-tabs" |
| 102 | + style="grid-template-columns: repeat({tabItems.length}, minmax(6rem, 1fr));" |
| 103 | + class="relative grid w-full items-end overflow-auto border-b border-[#F2F4F7] text-xs sm:text-sm" |
| 104 | + > |
| 105 | + {#each tabItems as { id, title, condition }} |
| 106 | + {#if condition} |
| 107 | + <button |
| 108 | + onclick={() => (showOutputDetails.activeTab = id)} |
| 109 | + class="px-0 py-2 font-medium sm:px-4 {showOutputDetails.activeTab === id |
| 110 | + ? 'text-[#344054]' |
| 111 | + : 'text-[#98A2B3]'} text-center transition-colors" |
| 112 | + > |
| 113 | + {title} |
| 114 | + </button> |
| 115 | + {/if} |
| 116 | + {/each} |
| 117 | + |
| 118 | + <div |
| 119 | + style="width: {(1 / tabItems.length) * 100}%; left: {tabHighlightPos}%;" |
| 120 | + class="absolute bottom-0 h-[3px] bg-secondary transition-[left]" |
| 121 | + ></div> |
| 122 | + </div> |
| 123 | + |
| 124 | + {#if showOutputDetails.activeTab === 'answer'} |
| 125 | + {@const rawHtml = converter |
| 126 | + .makeHtml(showOutputDetails.message?.content ?? '') |
| 127 | + .replaceAll(chatCitationPattern, (match, word) => |
| 128 | + citationReplacer( |
| 129 | + match, |
| 130 | + word, |
| 131 | + showOutputDetails.activeCell?.columnID ?? '', |
| 132 | + showOutputDetails.activeCell?.rowID ?? '', |
| 133 | + showOutputDetails.message?.chunks ?? [] |
| 134 | + ) |
| 135 | + )} |
| 136 | + |
| 137 | + <div class="flex h-1 grow flex-col items-center gap-2 overflow-auto px-8 py-4"> |
| 138 | + <p class="response-message flex max-w-full flex-col gap-4 whitespace-pre-line text-sm"> |
| 139 | + {@html rawHtml} |
| 140 | + </p> |
| 141 | + </div> |
| 142 | + {:else if showOutputDetails.activeTab === 'thinking'} |
| 143 | + {@const rawHtml = converter.makeHtml(showOutputDetails.reasoningContent ?? '')} |
| 144 | + <div class="flex h-1 grow flex-col items-center gap-2 overflow-auto px-8 py-4"> |
| 145 | + {#if showOutputDetails.reasoningTime} |
| 146 | + <div class="mb-2 flex select-none items-center gap-2 self-start text-sm text-[#667085]"> |
| 147 | + <ChevronRight size={16} /> |
| 148 | + Thought for {showOutputDetails.reasoningTime.toFixed()} second{Number( |
| 149 | + showOutputDetails.reasoningTime.toFixed() |
| 150 | + ) > 1 |
| 151 | + ? 's' |
| 152 | + : ''} |
| 153 | + </div> |
| 154 | + {/if} |
| 155 | + |
| 156 | + <p |
| 157 | + class="response-message flex max-w-full flex-col gap-4 whitespace-pre-line text-sm text-[#475467]" |
| 158 | + > |
| 159 | + {@html rawHtml} |
| 160 | + </p> |
| 161 | + </div> |
| 162 | + {:else if showOutputDetails.activeTab === 'references'} |
| 163 | + <References bind:showReferences={showOutputDetails} /> |
| 164 | + {/if} |
| 165 | + </div> |
| 166 | +</div> |
0 commit comments