Skip to content

Commit

Permalink
fix: render context chat's the referenced source items
Browse files Browse the repository at this point in the history
Signed-off-by: Anupam Kumar <[email protected]>
  • Loading branch information
kyteinsky committed Sep 16, 2024
1 parent 7f611c3 commit 90d12d0
Show file tree
Hide file tree
Showing 2 changed files with 148 additions and 4 deletions.
14 changes: 10 additions & 4 deletions src/components/AssistantTextProcessingForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,11 @@
:show-advanced.sync="showAdvanced" />
<div v-if="hasOutput"
class="output">
<TaskTypeFields
<ContextChatOutputForm v-if="mySelectedTaskTypeId === 'context_chat:context_chat'"
class="output-fields"
:output-shape="selectedTaskType.outputShape"
:output="myOutputs" />
<TaskTypeFields v-else
class="output-fields"
:is-output="true"
:shape="selectedTaskType.outputShape"
Expand Down Expand Up @@ -120,20 +124,21 @@
</template>
<script>
import UnfoldLessHorizontalIcon from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
import UnfoldMoreHorizontalIcon from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue'
import CreationIcon from 'vue-material-design-icons/Creation.vue'
import HistoryIcon from 'vue-material-design-icons/History.vue'
import UnfoldLessHorizontalIcon from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
import UnfoldMoreHorizontalIcon from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
import AssistantFormInputs from './AssistantFormInputs.vue'
import ContextChatOutputForm from './ContextChat/ContextChatOutputForm.vue'
import NoProviderEmptyContent from './NoProviderEmptyContent.vue'
import TaskList from './TaskList.vue'
import TaskTypeSelect from './TaskTypeSelect.vue'
Expand Down Expand Up @@ -169,6 +174,7 @@ export default {
ArrowLeftIcon,
NcNoteCard,
AssistantFormInputs,
ContextChatOutputForm,
},
provide() {
return {
Expand Down
138 changes: 138 additions & 0 deletions src/components/ContextChat/ContextChatOutputForm.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
<template>
<div class="cc-output">
<div class="cc-output__text">
<TextField
field-key="cc-output-text"
:value="output.output"
:field="outputShape.output"
:is-output="true" />
</div>
<div class="cc-output__sources">
<label for="v-select" class="cc-output__sources__label">
{{ outputShape.sources.description }}
</label>
<NcSelect
:value="sources"
:placeholder="t('assistant', 'No sources referenced')"
:multiple="true"
:close-on-select="false"
:no-wrap="false"
:label-outside="true"
:append-to-body="false"
:dropdown-should-open="() => false">
<template #option="option">
<a class="select-option" :href="option.url">
<NcAvatar
:size="24"
:url="option.icon"
:display-name="option.label" />
<span class="multiselect-name">
{{ option.label }}
</span>
</a>
</template>
<template #selected-option="option">
<a class="select-option" :href="option.url">
<NcAvatar
:size="24"
:url="option.icon"
:display-name="option.label" />
<span class="multiselect-name">
{{ option.label }}
</span>
</a>
</template>
</NcSelect>
</div>
</div>
</template>

<script>
import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
import TextField from '../fields/TextField.vue'
export default {
name: 'ContextChatOutputForm',
components: {
NcAvatar,
NcSelect,
TextField,
},
props: {
outputShape: {
type: Object,
required: true,
},
output: {
type: Object,
required: true,
},
},
computed: {
sources() {
try {
return JSON.parse(this.output.sources)
} catch (e) {
console.error('Failed to parse sources', e)
return []
}
},
},
}
</script>

<style lang="scss" scoped>
.cc-output {
display: flex;
flex-direction: column;
align-items: start;
gap: 8px;
.advanced {
width: 100%;
}
&__text {
width: 100%;
}
&__sources {
display: flex;
flex-direction: column;
:deep .v-select {
min-width: 400px !important;
> div {
border: 2px solid var(--color-primary-element) !important;
}
.avatardiv {
border-radius: 50%;
&> img {
border-radius: 0 !important;
}
}
.vs__actions {
display: none !important;
}
}
.select-option {
display: flex;
align-items: center;
}
.multiselect-name {
margin-left: 8px;
}
}
}
</style>

0 comments on commit 90d12d0

Please sign in to comment.