Components
DiffView
Diffs (unified or split): sticky collapsible file headers, git-tinted rows with a gutter bar, Shiki syntax highlighting, word emphasis, hunk separators, DiffStat, preview variant.
Pane
Rows are one code line (13/19, 12/17 compact). Added ≈ #263b24 | #e7f4e7 with a 3px #32d74b | #1e9e3c gutter bar; headers stick while their file scrolls. Code is syntax-highlighted (github-light / cds-dark); layout split pairs each deletion with the addition after it.
12 placeholder?: string
13 disabled?: boolean
14}>()
15const draft = ref('')
15const draft = useDraft(props.chatId)
16const canSend = computed(() => draft.value.trim().length > 0)
17
18function send() {
19 emit('send', draft.value)
41 if (event.key === 'Enter' && !event.shiftKey) {
42 event.preventDefault()
42 send()
43 if (canSend.value) send()
44 }
45}
3import androidx.compose.runtime.Composable
4import androidx.compose.ui.Modifier
5import androidx.compose.foundation.layout.padding
4import androidx.compose.ui.Modifier // a deliberately long line that wraps when overflow is set to wrap and scrolls horizontally otherwise
5
6@Composable
Preview, states, DiffStat
12 placeholder?: string
13 disabled?: boolean
14}>()
15const draft = ref('')
12 placeholder?: string
13 disabled?: boolean
14}>()
15const draft = ref('')
Loading changes
No changes to show
12 added lines3 removed lines128 added lines0 removed lines4 added lines31 removed lines
Whole file
mode="file": one file with a 37px number gutter, 22px rows and syntax highlighting (the conversation file viewer).
<script setup lang="ts">import { computed } from 'vue'const props = defineProps<{ count: number }>()const label = computed(() => (props.count === 1 ? '1 item' : `${props.count} items`))</script><template> <span class="text-secondary">{{ label }}</span></template>