Skip to content

Commit 9322ed2

Browse files
nakul-cometchatnakul-cometchat
committed
Interactive Messages Changes
1 parent 3bde08e commit 9322ed2

11 files changed

+845
-1
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,6 @@ pnpm-debug.log*
2121
*.njsproj
2222
*.sln
2323
*.sw?
24+
25+
# Exclude all ._ files
26+
._*

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"lint": "vue-cli-service lint"
1010
},
1111
"dependencies": {
12-
"@cometchat/chat-uikit-vue": "4.0.1",
12+
"@cometchat/chat-uikit-vue": "4.0.3",
1313
"@cometchat/calls-sdk-javascript": "4.0.4",
1414
"core-js": "^3.8.3",
1515
"file-loader": "^6.2.0",

‎src/CardBubble/index.vue

+271
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
<template>
2+
<cometchat-backdrop>
3+
<div class="card__container" :style="computedStyles.wrapperStyle()">
4+
<div class="header">
5+
<span class="header-title" :style="computedStyles.titleStyle()"
6+
>Card Bubble</span
7+
>
8+
<div
9+
class="close__icon"
10+
:style="computedStyles.closeIconStyle()"
11+
@click="onClose()"
12+
></div>
13+
</div>
14+
<div class="description" :style="computedStyles.cardDescriptionStyle()">
15+
The CometChatCardBubble component is used to display a card within a
16+
chat bubble. To learn more about this component tap here.
17+
</div>
18+
<div class="card">
19+
<CometChatCardBubble
20+
:message="getCardMessage()"
21+
:cardBubbleStyle="getCardMessageBubbleStyle()"
22+
>
23+
</CometChatCardBubble>
24+
</div>
25+
</div>
26+
</cometchat-backdrop>
27+
</template>
28+
29+
<script lang="ts">
30+
import { computed, defineComponent, inject } from "vue";
31+
32+
import {
33+
CometChatTheme,
34+
Close2xIcon,
35+
fontHelper,
36+
CardMessage,
37+
CometChatCardBubble,
38+
CardBubbleStyle,
39+
} from "@cometchat/chat-uikit-vue";
40+
41+
import "@cometchat/uikit-elements";
42+
43+
export default defineComponent({
44+
name: "cardBubble",
45+
emits: ["close-card-bubble"],
46+
components: { CometChatCardBubble },
47+
48+
setup(props, context) {
49+
let { theme, switchThemeMode }: any = inject(
50+
"theme",
51+
new CometChatTheme({})
52+
);
53+
let closeIconURL: string = Close2xIcon;
54+
55+
const computedStyles: any = computed(() => {
56+
return theme.value.palette.mode ? getStyles() : {};
57+
});
58+
59+
const onClose = () => {
60+
context.emit("close-card-bubble", {});
61+
};
62+
63+
const getStyles = () => {
64+
return {
65+
closeIconStyle: () => {
66+
return {
67+
WebkitMask: `url(${closeIconURL}) center center no-repeat`,
68+
background: theme.value.palette.getAccent600(),
69+
};
70+
},
71+
titleStyle: () => {
72+
return {
73+
font: fontHelper(theme.value.typography.title2),
74+
color: theme.value.palette.getAccent(),
75+
};
76+
},
77+
wrapperStyle: () => {
78+
return {
79+
background: theme.value.palette.getBackground(),
80+
boxShadow: `${theme.value.palette.getAccent400()} 0px 0px 3px`,
81+
};
82+
},
83+
cardDescriptionStyle: () => {
84+
return {
85+
font: fontHelper(theme.value.typography.subtitle2),
86+
color: theme.value.palette.getAccent600(),
87+
};
88+
},
89+
};
90+
};
91+
92+
function getCardMessageBubbleStyle() {
93+
const buttonStyle = {
94+
height: "40px",
95+
width: "100%",
96+
background: "transparent",
97+
border: `none`,
98+
borderRadius: "0px",
99+
buttonTextFont: fontHelper(theme.value.typography.subtitle2),
100+
buttonTextColor: `${theme.value.palette.getPrimary()}`,
101+
justifyContent: "center",
102+
};
103+
104+
return new CardBubbleStyle({
105+
background: "transparent",
106+
border: `1px solid ${theme.value.palette.getAccent100()}`,
107+
borderRadius: "8px",
108+
height: "fit-content",
109+
width: "300px",
110+
imageHeight: "auto",
111+
imageWidth: "100%",
112+
imageRadius: "8px",
113+
imageBackgroundColor: "transparent",
114+
descriptionFontColor: theme.value.palette.getAccent(),
115+
descriptionFont: fontHelper(theme.value.typography.subtitle2),
116+
buttonStyle: buttonStyle,
117+
dividerTintColor: theme.value.palette.getAccent100(),
118+
wrapperBackground: theme.value.palette.getBackground(),
119+
wrapperBorderRadius: "8px",
120+
wrapperPadding: "2px",
121+
disabledButtonColor: theme.value.palette.getAccent600(),
122+
});
123+
}
124+
125+
function getCardMessage() {
126+
const json = {
127+
id: "1978",
128+
muid: "1697641596",
129+
conversationId: "nakul_user_rohit",
130+
sender: "nakul",
131+
receiverType: "user",
132+
receiver: "rohit",
133+
category: "interactive",
134+
type: "card",
135+
data: {
136+
entities: {
137+
sender: {
138+
entity: {
139+
uid: "nakul",
140+
name: "Nakul",
141+
role: "default",
142+
status: "available",
143+
lastActiveAt: 1697636600,
144+
},
145+
entityType: "user",
146+
},
147+
receiver: {
148+
entity: {
149+
uid: "rohit",
150+
name: "Rohit",
151+
role: "default",
152+
status: "available",
153+
lastActiveAt: 1696508846,
154+
conversationId: "nakul_user_rohit",
155+
},
156+
entityType: "user",
157+
},
158+
},
159+
resource:
160+
"REACT_NATIVE-4_0_0-2d83fe8e-a47e-444c-bbbf-c5d68afc030a-1697640527366",
161+
interactionGoal: {
162+
type: "none",
163+
elementIds: [],
164+
},
165+
interactiveData: {
166+
text: "Introducing our latest product, the Super Widget 5000! With its advanced features and sleek design, this widget is sure to revolutionize the industry. Don't miss out on the opportunity to experience the future of widgets. Order yours today!",
167+
imageUrl:
168+
"https://upload.wikimedia.org/wikipedia/en/e/e1/Thomas_D._Baird_%28low-resolution%29.jpg",
169+
cardActions: [
170+
{
171+
action: {
172+
url: "https://api.example.com/register",
173+
actionType: "urlNavigation",
174+
},
175+
elementId: "submitButton1",
176+
buttonText: "Order Now",
177+
elementType: "button",
178+
disableAfterInteracted: true,
179+
},
180+
{
181+
action: {
182+
url: "https://api.example.com/register",
183+
actionType: "urlNavigation",
184+
},
185+
elementId: "submitButton2",
186+
buttonText: "Register Now",
187+
elementType: "button",
188+
disableAfterInteracted: true,
189+
},
190+
{
191+
action: {
192+
url: "https://api.example.com/register",
193+
actionType: "urlNavigation",
194+
},
195+
elementId: "submitButton3",
196+
buttonText: "Login Now",
197+
elementType: "button",
198+
disableAfterInteracted: true,
199+
},
200+
],
201+
interactableElementIds: [
202+
"submitButton1",
203+
"submitButton2",
204+
"submitButton3",
205+
],
206+
},
207+
allowSenderInteraction: true,
208+
},
209+
sentAt: 1697641596,
210+
deliveredAt: 1697641596,
211+
readAt: 1697708285,
212+
updatedAt: 1697708285,
213+
};
214+
215+
const cardMessage = CardMessage.fromJSON(json);
216+
217+
return cardMessage;
218+
}
219+
return {
220+
computedStyles,
221+
onClose,
222+
getCardMessage,
223+
getCardMessageBubbleStyle,
224+
};
225+
},
226+
});
227+
</script>
228+
<style scoped>
229+
.close__icon {
230+
height: 30px;
231+
width: 30px;
232+
cursor: pointer;
233+
}
234+
235+
.header {
236+
display: flex;
237+
width: 100%;
238+
justify-content: space-between;
239+
}
240+
241+
.header-title {
242+
display: flex;
243+
align-items: center;
244+
justify-content: center;
245+
}
246+
247+
.card {
248+
width: 100%;
249+
display: flex;
250+
justify-content: center;
251+
align-items: center;
252+
}
253+
254+
.card__container {
255+
height: fit-content;
256+
max-height: 80%;
257+
width: 320px;
258+
transform: translate(-50%, -50%);
259+
left: 50%;
260+
top: 50%;
261+
position: absolute;
262+
z-index: 10;
263+
padding: 12px 16px;
264+
border-radius: 12px;
265+
display: flex;
266+
flex-direction: column;
267+
justify-content: flex-start;
268+
gap: 12px;
269+
overflow: scroll;
270+
}
271+
</style>

0 commit comments

Comments
 (0)