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

@@ -1,90 +0,0 @@
<script>
export default {
props: {
popupMessage: {
type: String,
default: '',
},
routeText: {
type: String,
default: '',
},
hasCloseButton: {
type: Boolean,
default: true,
},
closeButtonText: {
type: String,
default: '',
},
},
emits: ['open', 'close'],
methods: {
onClickOpenPath() {
this.$emit('open');
},
onClickClose(e) {
this.$emit('close', e);
},
},
};
</script>
<template>
<div class="announcement-popup">
<span v-if="popupMessage" class="popup-content">
{{ popupMessage }}
<span v-if="routeText" class="route-url" @click="onClickOpenPath">
{{ routeText }}
</span>
</span>
<div v-if="hasCloseButton" class="popup-close">
<woot-button
v-if="hasCloseButton"
color-scheme="primary"
variant="link"
size="small"
@click="onClickClose"
>
{{ closeButtonText }}
</woot-button>
</div>
</div>
</template>
<style lang="scss">
.announcement-popup {
max-width: 15rem;
min-width: 10rem;
display: flex;
position: absolute;
flex-direction: column;
align-items: flex-start;
height: fit-content;
background: var(--white);
padding: 0 var(--space-normal);
z-index: var(--z-index-much-higher);
box-shadow: var(--b-200) 4px 4px 16px 4px;
border-radius: var(--border-radius-normal);
.popup-content {
font-size: var(--font-size-mini);
color: var(--s-700);
padding: var(--space-one) 0;
.route-url {
font-size: var(--font-size-mini);
color: var(--s-600);
cursor: pointer;
text-decoration: underline;
}
}
.popup-close {
width: 100%;
display: flex;
align-items: center;
padding: var(--space-one) 0;
border-top: 1px solid var(--color-border-light);
}
}
</style>