fix(ContactSelectionBubble): adjust to use with different participant types

- rewrite to TS

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/UIShared/ContactSelectionBubble.vue

@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 
 import { t } from '@nextcloud/l10n'
@@ -13,27 +13,37 @@ import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
 import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 
 import { AVATAR } from '../../constants.js'
+import type { Participant, ParticipantSearchResult } from '../../types/index.ts'
 
-const props = defineProps({
-	participant: {
-		type: Object,
-		required: true,
-	},
-})
+const props = defineProps<{
+	participant: Participant | ParticipantSearchResult,
+}>()
 const emit = defineEmits(['update'])
 
-const removeLabel = computed(() => t('spreed', 'Remove participant {name}', { name: props.participant.label }))
+const actorId = computed(() => {
+	return ('actorId' in props.participant) ? props.participant.actorId : props.participant.id
+})
+const actorType = computed(() => {
+	return ('actorId' in props.participant) ? props.participant.actorType : props.participant.source
+})
+const computedName = computed(() => {
+	return (('actorId' in props.participant) ? props.participant.displayName : props.participant.label) || t('spreed', 'Guest')
+})
+const token = computed(() => {
+	return ('actorId' in props.participant) ? props.participant.roomToken : 'new'
+})
+const removeLabel = computed(() => t('spreed', 'Remove participant {name}', { name: computedName.value }))
 </script>
 
 <template>
-	<NcChip :text="participant.label"
+	<NcChip :text="computedName"
 		:aria-label-close="removeLabel"
 		@close="emit('update', participant)">
 		<template #icon>
-			<AvatarWrapper :id="participant.id"
-				token="new"
-				:name="participant.label"
-				:source="participant.source"
+			<AvatarWrapper :id="actorId"
+				:token="token"
+				:name="computedName"
+				:source="actorType"
 				:size="AVATAR.SIZE.EXTRA_SMALL"
 				disable-menu
 				disable-tooltip />