LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Update Copilot UI in favor of the new design (#11544)

Browse Source 
Removes avatar from the components.

**Before:**
<img width="283" alt="Screenshot 2025-05-21 at 3 58 10 PM"
src="https://github.com/user-attachments/assets/8f25343f-e24a-4d39-b8e8-6e10610cd8da"
/>


**After:** 
<img width="286" alt="Screenshot 2025-05-21 at 3 57 29 PM"
src="https://github.com/user-attachments/assets/f3704dc9-d270-4e6e-94c5-6c7aa0903b24"
/>
This commit is contained in:
Pranav
2025-05-21 18:14:51 -07:00
committed by GitHub
parent dc7f1597e5
commit 743b73d0af
2 changed files with 21 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/javascript/dashboard/components-next/copilot/CopilotAgentMessage.vue
View File

@@ -1,31 +1,17 @@
<script setup> <script setup>
import Avatar from '../avatar/Avatar.vue';
defineProps({ defineProps({
message: { message: {
type: Object, type: Object,
required: true, required: true,
}, },
supportAgent: {
type: Object,
required: true,
},
}); });
</script> </script>
<template> <template>
<div class="flex flex-row gap-2"> <div class="space-y-1 text-n-slate-12">
<Avatar <div class="font-medium">{{ $t('CAPTAIN.COPILOT.YOU') }}</div>
:name="supportAgent.available_name" <div class="break-words">
:src="supportAgent.avatar_url" {{ message.content }}
:size="24"
rounded-full
/>
<div class="space-y-1 text-n-slate-12">
<div class="font-medium">{{ $t('CAPTAIN.COPILOT.YOU') }}</div>
<div class="break-words">
{{ message.content }}
</div>
</div> </div>
</div> </div>
</template> </template>

43
app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue
View File

@@ -9,7 +9,6 @@ import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
import MessageFormatter from 'shared/helpers/MessageFormatter.js'; import MessageFormatter from 'shared/helpers/MessageFormatter.js';
import Button from 'dashboard/components-next/button/Button.vue'; import Button from 'dashboard/components-next/button/Button.vue';
import Avatar from '../avatar/Avatar.vue';
const props = defineProps({ const props = defineProps({
message: { message: {
@@ -46,33 +45,25 @@ const useCopilotResponse = () => {
</script> </script>
<template> <template>
<div class="flex flex-row gap-2"> <div class="flex flex-col gap-1 text-n-slate-12">
<Avatar <div class="font-medium">{{ $t('CAPTAIN.NAME') }}</div>
name="Captain Copilot" <span v-if="hasEmptyMessageContent" class="text-n-ruby-11">
icon-name="i-woot-captain" {{ $t('CAPTAIN.COPILOT.EMPTY_MESSAGE') }}
:size="24" </span>
rounded-full <div
v-else
v-dompurify-html="messageContent"
class="prose-sm break-words"
/> />
<div class="flex flex-col gap-1 text-n-slate-12"> <div class="flex flex-row mt-1">
<div class="font-medium">{{ $t('CAPTAIN.NAME') }}</div> <Button
<span v-if="hasEmptyMessageContent" class="text-n-ruby-11"> v-if="!hasEmptyMessageContent"
{{ $t('CAPTAIN.COPILOT.EMPTY_MESSAGE') }} :label="$t('CAPTAIN.COPILOT.USE')"
</span> faded
<div sm
v-else slate
v-dompurify-html="messageContent" @click="useCopilotResponse"
class="prose-sm break-words"
/> />
<div class="flex flex-row mt-1">
<Button
v-if="!hasEmptyMessageContent"
:label="$t('CAPTAIN.COPILOT.USE')"
faded
sm
slate
@click="useCopilotResponse"
/>
</div>
</div> </div>
</div> </div>
</template> </template>