-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Enhance chat application with file selection and session manage…
…ment - Updated `App.vue` to track the last answer received and pass it to `ChatHistory`. - Integrated `dayjs` for date manipulation. - Added `FileSelector` component to `ChatInputForm.vue` for improved file handling. - Created `FileSelector.vue` to encapsulate file selection logic and UI. - Introduced `SessionList.vue` to manage and display chat sessions in a reversed order. - Moved session list logic from `ChatSessions.vue` to `SessionList.vue` for better separation of concerns. - Updated components to use new props and event handling for file and session management. - Refactored methods in `ChatHistory.vue` to update chat history based on `lastAnswerReceivedTime`.
- Loading branch information
1 parent
3ff534b
commit 1b684c6
Showing
6 changed files
with
151 additions
and
75 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <template> | ||
| <div> | ||
| <!-- Hidden default file input --> | ||
| <input type="file" @change="handleFileChange" accept="image/*" multiple class="form-control-file" | ||
| ref="fileInput" style="display: none" /> | ||
| <!-- Custom button for file selection --> | ||
| <button type="button" class="btn btn-secondary" @click="triggerFileInput"> | ||
| Select Files | ||
| </button> | ||
| <div v-if="fileNames.length" class="mt-2"> | ||
| <strong>Selected files:</strong> | ||
| <ul> | ||
| <li v-for="fileName in fileNames" :key="fileName">{{ fileName }}</li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent, ref } from 'vue'; | ||
| export default defineComponent({ | ||
| emits: ['files-selected'], | ||
| setup(_, { emit }) { | ||
| const selectedFiles = ref<File[]>([]); | ||
| const fileNames = ref<string[]>([]); | ||
| const fileInput = ref<HTMLInputElement | null>(null); | ||
| const handleFileChange = (event: Event) => { | ||
| const target = event.target as HTMLInputElement; | ||
| if (target.files) { | ||
| selectedFiles.value = Array.from(target.files); | ||
| fileNames.value = selectedFiles.value.map(file => file.name); | ||
| emit('files-selected', selectedFiles.value); | ||
| } | ||
| }; | ||
| const triggerFileInput = () => { | ||
| fileInput.value?.click(); | ||
| }; | ||
| return { | ||
| fileNames, | ||
| handleFileChange, | ||
| triggerFileInput, | ||
| fileInput, | ||
| }; | ||
| }, | ||
| }); | ||
| </script> | ||
|
|
||
| <style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <template> | ||
| <ul class="list-group list-group-flush flex-grow-1 overflow-auto mb-3"> | ||
| <li v-for="sessionId in reversedSessionIdList" :key="sessionId" | ||
| :class="['list-group-item', 'cursor-pointer', { active: currentSessionId === sessionId }]" | ||
| @click="selectSession(sessionId)"> | ||
| Chat Session: {{ sessionId }} | ||
| </li> | ||
| </ul> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent, PropType } from 'vue'; | ||
| import { SessionId } from '../types'; | ||
| export default defineComponent({ | ||
| props: { | ||
| sessionIdList: { | ||
| type: Array as PropType<SessionId[]>, | ||
| required: true, | ||
| }, | ||
| currentSessionId: { | ||
| type: [String, null] as PropType<SessionId | null>, | ||
| default: null, | ||
| }, | ||
| }, | ||
| computed: { | ||
| reversedSessionIdList(): SessionId[] { | ||
| return [...this.sessionIdList].reverse(); | ||
| }, | ||
| }, | ||
| methods: { | ||
| selectSession(sessionId: SessionId) { | ||
| this.$emit('select-session', sessionId); | ||
| }, | ||
| }, | ||
| }); | ||
| </script> | ||
|
|
||
| <style scoped></style> |