chore: Update buttons in conversation screens(#11132)

# Pull Request Template

### Changes includes
* Update send message and add note button
<img width="151" alt="image"
src="https://github.com/user-attachments/assets/646d1d22-07be-4f2f-9090-6642556aa761"
/>
<img width="151" alt="image"
src="https://github.com/user-attachments/assets/b5651420-c48b-4932-aff9-911788b9eabc"
/>
<img width="165" alt="image"
src="https://github.com/user-attachments/assets/f1ace171-2115-4eba-9055-e568d1b73c5e"
/>
<img width="165" alt="image"
src="https://github.com/user-attachments/assets/0c818461-ccdb-46ab-b7d3-3917e4ee4e74"
/>
<img width="165" alt="image"
src="https://github.com/user-attachments/assets/eef1545b-1bed-47a1-8b83-ed5d5da3f24f"
/>
<img width="165" alt="image"
src="https://github.com/user-attachments/assets/429de6e6-1263-4216-9222-4eaece95da81"
/>
<img width="165" alt="image"
src="https://github.com/user-attachments/assets/59a69867-4da1-4695-b88c-329142a693a8"
/>
<img width="165" alt="image"
src="https://github.com/user-attachments/assets/7114745c-836f-4c5a-b5d6-e200e1343a73"
/>

* Remove Unused component `AnnouncementPopup.vue`
* Updated button for custom attributes in conversation sidebar.
<img width="225" alt="image"
src="https://github.com/user-attachments/assets/a71f6c31-aca9-4e1b-bf63-6b9d5ed183c8"
/>
<img width="310" alt="image"
src="https://github.com/user-attachments/assets/8d847e1b-4a13-4108-a487-ce3d36257afa"
/>

* Update button in custom snooze modal buttons
<img width="207" alt="image"
src="https://github.com/user-attachments/assets/78315ce6-9734-467b-a4d3-e753d3eca384"
/>

* Update modal component close button
<img width="80" alt="image"
src="https://github.com/user-attachments/assets/643e9ef0-b781-47ce-a66b-a9ee4760c952"
/>

* Update AI assistant modal and AICTA modal
<img width="319" alt="image"
src="https://github.com/user-attachments/assets/8d0986ec-ec7a-4abb-9327-f73df8b4d942"
/>
<img width="565" alt="image"
src="https://github.com/user-attachments/assets/1e02ddd1-7f51-4d8a-bb57-558b9a50c938"
/>

* Update remove attachment button
<img width="301" alt="image"
src="https://github.com/user-attachments/assets/90c93eee-0b4d-4839-9db5-edc4b023df4b"
/>

* Update the conversation header buttons
<img width="256" alt="image"
src="https://github.com/user-attachments/assets/abac5d7e-dd83-40ae-b548-76bbafaa2231"
/>

* Update the retry button in old message bubbles.

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese
2025-03-21 14:47:28 +05:30
committed by GitHub
parent 5745ffbcb0
commit 280bc58963
12 changed files with 145 additions and 179 deletions

View File

@@ -9,12 +9,15 @@ import { getRegexp } from 'shared/helpers/Validators';
import { useVuelidate } from '@vuelidate/core';
import { emitter } from 'shared/helpers/mitt';
import NextButton from 'dashboard/components-next/button/Button.vue';
const DATE_FORMAT = 'yyyy-MM-dd';
export default {
components: {
MultiselectDropdown,
HelperTextPopup,
NextButton,
},
props: {
label: { type: String, required: true },
@@ -219,14 +222,13 @@ export default {
class="mt-0.5"
/>
</span>
<woot-button
<NextButton
v-if="showActions && value"
v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
variant="link"
size="medium"
color-scheme="secondary"
icon="delete"
class-names="flex justify-end !w-fit"
slate
sm
link
icon="i-lucide-trash-2"
@click="onDelete"
/>
</div>
@@ -246,10 +248,10 @@ export default {
@keyup.enter="onUpdate"
/>
<div>
<woot-button
size="small"
icon="checkmark"
class="ltr:rounded-l-none rtl:rounded-r-none"
<NextButton
sm
icon="i-lucide-check"
class="ltr:rounded-l-none rtl:rounded-r-none h-[34px]"
@click="onUpdate"
/>
</div>
@@ -281,25 +283,27 @@ export default {
>
{{ displayValue || '---' }}
</p>
<div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
<woot-button
<div
class="flex items-center max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0"
>
<NextButton
v-if="showActions && value"
v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
variant="link"
size="small"
color-scheme="secondary"
icon="clipboard"
class-names="hidden group-hover:flex !w-6 flex-shrink-0"
xs
slate
ghost
icon="i-lucide-clipboard"
class="hidden group-hover:flex flex-shrink-0"
@click="onCopy"
/>
<woot-button
<NextButton
v-if="showActions"
v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
variant="link"
size="small"
color-scheme="secondary"
icon="edit"
class-names="hidden group-hover:flex !w-6 flex-shrink-0"
xs
slate
ghost
icon="i-lucide-pen"
class="hidden group-hover:flex flex-shrink-0"
@click="onEdit"
/>
</div>