@product7/feedback-sdk 1.5.4 → 1.5.8

package/src/widgets/SurveyWidget.js

@@ -12,6 +12,25 @@ export class SurveyWidget extends BaseWidget {
 			description: options.description || null,
 			lowLabel: options.lowLabel || null,
 			highLabel: options.highLabel || null,
+			ratingScale: options.ratingScale || options.scale || null,
+			showFeedbackInput:
+				typeof options.showFeedbackInput === 'boolean'
+					? options.showFeedbackInput
+					: null,
+			showSubmitButton:
+				typeof options.showSubmitButton === 'boolean'
+					? options.showSubmitButton
+					: null,
+			autoSubmitOnSelect:
+				typeof options.autoSubmitOnSelect === 'boolean'
+					? options.autoSubmitOnSelect
+					: null,
+			showTitle:
+				typeof options.showTitle === 'boolean' ? options.showTitle : null,
+			showDescription:
+				typeof options.showDescription === 'boolean'
+					? options.showDescription
+					: null,
 			customQuestions: options.customQuestions || [],
 			pages: Array.isArray(options.pages) ? options.pages : [],
 			respondentId: options.respondentId || null,
@@ -26,6 +45,7 @@ export class SurveyWidget extends BaseWidget {
 			customAnswers: {},
 			pageAnswers: {},
 			currentPageIndex: 0,
+			isSubmitting: false,
 			isVisible: false,
 		};
 	}
@@ -61,6 +81,10 @@ export class SurveyWidget extends BaseWidget {
 		const config = this._getSurveyConfig();
 		const isMultiPage = this._isMultiPageSurvey();
 		const isLastPage = this._isLastPage();
+		const showFeedbackInput = this._shouldShowFeedbackInput();
+		const showActions = this._shouldShowActions();
+		const showTitle = this._shouldShowTitle(config);
+		const showDescription = this._shouldShowDescription(config);
 		const pageProgress = isMultiPage
 			? `Page ${this.surveyState.currentPageIndex + 1} of ${this.surveyOptions.pages.length}`
 			: '';
@@ -80,21 +104,33 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		this.surveyElement = document.createElement('div');
-		this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position}`;
+		this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position}${
+			showDescription && !showTitle
+				? ' feedback-survey-description-primary'
+				: ''
+		}`;
 
 		this.surveyElement.innerHTML = `
-			<button class="feedback-survey-close">&times;</button>
-			<h3 class="feedback-survey-title">${config.title}</h3>
-			<p class="feedback-survey-description">${config.description}</p>
+			<button class="feedback-survey-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg></button>
+			${showTitle ? `<h3 class="feedback-survey-title">${config.title}</h3>` : ''}
+			${showDescription ? `<p class="feedback-survey-description">${config.description}</p>` : ''}
 			${isMultiPage ? `<div class="feedback-survey-progress">${pageProgress}</div>` : ''}
 			<div class="feedback-survey-content">${config.html}</div>
-			<div class="feedback-survey-feedback">
+			${
+				showFeedbackInput
+					? `<div class="feedback-survey-feedback">
 				<textarea class="feedback-survey-textarea" placeholder="Any additional feedback? (optional)">${this.surveyState.feedback || ''}</textarea>
-			</div>
-			<div class="feedback-survey-actions">
+			</div>`
+					: ''
+			}
+			${
+				showActions
+					? `<div class="feedback-survey-actions">
 				${backButton}
 				<button class="feedback-survey-submit">${submitLabel}</button>
-			</div>
+			</div>`
+					: ''
+			}
 		`;
 
 		document.body.appendChild(this.surveyElement);
@@ -114,37 +150,62 @@ export class SurveyWidget extends BaseWidget {
 			return this._getCurrentPageConfig();
 		}
 
+		const npsScale = this._getNPSScale();
+		const npsUsesSegmentedScale = npsScale.values.length <= 7;
+		const npsContainerClass = npsUsesSegmentedScale
+			? 'feedback-survey-ces feedback-survey-rating-scale'
+			: 'feedback-survey-nps';
+		const npsButtonClass = npsUsesSegmentedScale
+			? 'feedback-survey-nps-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn'
+			: 'feedback-survey-nps-btn';
+		const npsLowLabel =
+			this.surveyOptions.lowLabel ||
+			(npsScale.start === 0 ? 'Not likely' : 'Strongly Disagree');
+		const npsHighLabel =
+			this.surveyOptions.highLabel ||
+			(npsScale.start === 0 ? 'Very likely' : 'Strongly Agree');
+		const npsPrompt =
+			this.surveyOptions.description ||
+			this.surveyOptions.title ||
+			'How likely are you to recommend us?';
+		const csatPrompt =
+			this.surveyOptions.description ||
+			this.surveyOptions.title ||
+			'How satisfied are you?';
+		const cesPrompt =
+			this.surveyOptions.description ||
+			this.surveyOptions.title ||
+			'How easy was it?';
+
 		const configs = {
 			nps: {
-				title:
-					this.surveyOptions.title || 'How likely are you to recommend us?',
-				description:
-					this.surveyOptions.description ||
-					'On a scale of 0-10, how likely are you to recommend our product to a friend or colleague?',
+				title: this.surveyOptions.title || '',
+				description: npsPrompt,
 				html: `
-					<div class="feedback-survey-nps">
-						${[...Array(11).keys()]
+					<div class="${npsContainerClass}">
+						${npsScale.values
 							.map(
 								(n) => `
-							<button class="feedback-survey-nps-btn" data-score="${n}">${n}</button>
+							<button class="${npsButtonClass}" data-score="${n}">${n}</button>
 						`
 							)
 							.join('')}
 					</div>
-					<div class="feedback-survey-labels">
-						<span>${this.surveyOptions.lowLabel || 'Not likely'}</span>
-						<span>${this.surveyOptions.highLabel || 'Very likely'}</span>
-					</div>
+					${this._renderScaleLabels(npsLowLabel, npsHighLabel)}
 				`,
 			},
 			csat: {
-				title: this.surveyOptions.title || 'How satisfied are you?',
-				description:
-					this.surveyOptions.description ||
-					'How would you rate your overall satisfaction with our product?',
+				title: this.surveyOptions.title || '',
+				description: csatPrompt,
 				html: `
 					<div class="feedback-survey-csat">
-						${['😞', '😕', '😐', '🙂', '😄']
+						${[
+							'\uD83D\uDE1E',
+							'\uD83D\uDE15',
+							'\uD83D\uDE10',
+							'\uD83D\uDE42',
+							'\uD83D\uDE04',
+						]
 							.map(
 								(emoji, i) => `
 							<button class="feedback-survey-csat-btn" data-score="${i + 1}">${emoji}</button>
@@ -152,17 +213,15 @@ export class SurveyWidget extends BaseWidget {
 							)
 							.join('')}
 					</div>
-					<div class="feedback-survey-labels">
-						<span>${this.surveyOptions.lowLabel || 'Very dissatisfied'}</span>
-						<span>${this.surveyOptions.highLabel || 'Very satisfied'}</span>
-					</div>
+					${this._renderScaleLabels(
+						this.surveyOptions.lowLabel || 'Very dissatisfied',
+						this.surveyOptions.highLabel || 'Very satisfied'
+					)}
 				`,
 			},
 			ces: {
-				title: this.surveyOptions.title || 'How easy was it?',
-				description:
-					this.surveyOptions.description ||
-					'How easy was it to accomplish your task today?',
+				title: this.surveyOptions.title || '',
+				description: cesPrompt,
 				html: `
 					<div class="feedback-survey-ces">
 						${['Very Difficult', 'Difficult', 'Neutral', 'Easy', 'Very Easy']
@@ -187,6 +246,91 @@ export class SurveyWidget extends BaseWidget {
 		return configs[this.surveyOptions.surveyType] || configs.nps;
 	}
 
+	_getNPSScale() {
+		const rawScale = Number(this.surveyOptions.ratingScale);
+		const scale = Number.isFinite(rawScale) && rawScale >= 2 ? rawScale : 5;
+		const start = scale === 11 ? 0 : 1;
+		return {
+			scale,
+			start,
+			values: Array.from({ length: scale }, (_, index) => start + index),
+		};
+	}
+
+	_renderScaleLabels(lowLabel, highLabel) {
+		const low = lowLabel || '';
+		const high = highLabel || '';
+		if (!low && !high) {
+			return '';
+		}
+		return `
+			<div class="feedback-survey-labels">
+				<span>${low}</span>
+				<span>${high}</span>
+			</div>
+		`;
+	}
+
+	_isRatingSurveyType(type = this.surveyOptions.surveyType) {
+		return type === 'nps' || type === 'csat' || type === 'ces';
+	}
+
+	_shouldShowTitle(config) {
+		if (!config || !config.title) {
+			return false;
+		}
+		if (typeof this.surveyOptions.showTitle === 'boolean') {
+			return this.surveyOptions.showTitle;
+		}
+		if (!this._isMultiPageSurvey() && this._isRatingSurveyType()) {
+			return !config.description;
+		}
+		return true;
+	}
+
+	_shouldShowDescription(config) {
+		if (typeof this.surveyOptions.showDescription === 'boolean') {
+			return this.surveyOptions.showDescription;
+		}
+		if (!this._isMultiPageSurvey() && this._isRatingSurveyType()) {
+			return Boolean(config && (config.description || config.title));
+		}
+		return Boolean(config && config.description);
+	}
+
+	_shouldShowFeedbackInput() {
+		if (this._isMultiPageSurvey()) {
+			return false;
+		}
+		if (typeof this.surveyOptions.showFeedbackInput === 'boolean') {
+			return this.surveyOptions.showFeedbackInput;
+		}
+		return false;
+	}
+
+	_shouldAutoSubmitOnSelect() {
+		if (typeof this.surveyOptions.autoSubmitOnSelect === 'boolean') {
+			return this.surveyOptions.autoSubmitOnSelect;
+		}
+		if (this._isMultiPageSurvey()) {
+			return false;
+		}
+		if (this.surveyOptions.showSubmitButton === true) {
+			return false;
+		}
+		return this._isRatingSurveyType() && !this._shouldShowFeedbackInput();
+	}
+
+	_shouldShowActions() {
+		if (this._isMultiPageSurvey()) {
+			return true;
+		}
+		if (typeof this.surveyOptions.showSubmitButton === 'boolean') {
+			return this.surveyOptions.showSubmitButton;
+		}
+		return !this._shouldAutoSubmitOnSelect();
+	}
+
 	_isMultiPageSurvey() {
 		return (
 			Array.isArray(this.surveyOptions.pages) &&
@@ -201,7 +345,9 @@ export class SurveyWidget extends BaseWidget {
 
 	_isLastPage() {
 		if (!this._isMultiPageSurvey()) return true;
-		return this.surveyState.currentPageIndex >= this.surveyOptions.pages.length - 1;
+		return (
+			this.surveyState.currentPageIndex >= this.surveyOptions.pages.length - 1
+		);
 	}
 
 	_getCurrentPageConfig() {
@@ -212,10 +358,7 @@ export class SurveyWidget extends BaseWidget {
 
 		return {
 			title: page.title || this.surveyOptions.title || 'Quick Feedback',
-			description:
-				page.description ||
-				this.surveyOptions.description ||
-				'Help us improve by answering this question.',
+			description: page.description || this.surveyOptions.description || '',
 			html: this._renderSurveyPage(page),
 		};
 	}
@@ -223,9 +366,7 @@ export class SurveyWidget extends BaseWidget {
 	_getFallbackSurveyConfig() {
 		return {
 			title: this.surveyOptions.title || 'Quick Feedback',
-			description:
-				this.surveyOptions.description ||
-				'Help us improve by answering a few questions.',
+			description: this.surveyOptions.description || '',
 			html: this._renderCustomQuestions(),
 		};
 	}
@@ -247,24 +388,48 @@ export class SurveyWidget extends BaseWidget {
 		const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
 		const config = page.ratingConfig || page.rating_config || {};
 		const scale = Number(config.scale) || 5;
-		const ratingType = config.survey_type || this.surveyOptions.surveyType || 'csat';
+		const ratingType =
+			config.survey_type || this.surveyOptions.surveyType || 'csat';
 		const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
 		const currentRating = pageAnswer.rating;
-
-		const labels = `
-			<div class="feedback-survey-labels">
-				<span>${config.low_label || this.surveyOptions.lowLabel || ''}</span>
-				<span>${config.high_label || this.surveyOptions.highLabel || ''}</span>
-			</div>
-		`;
-
-		if (scale === 11 || ratingType === 'nps') {
+		const defaultLowLabel =
+			ratingType === 'nps'
+				? scale === 11
+					? 'Not likely'
+					: 'Strongly Disagree'
+				: '';
+		const defaultHighLabel =
+			ratingType === 'nps'
+				? scale === 11
+					? 'Very likely'
+					: 'Strongly Agree'
+				: '';
+		const lowLabel =
+			config.low_label || this.surveyOptions.lowLabel || defaultLowLabel;
+		const highLabel =
+			config.high_label || this.surveyOptions.highLabel || defaultHighLabel;
+		const labels = this._renderScaleLabels(lowLabel, highLabel);
+
+		if (ratingType === 'nps') {
+			const npsScale = Number.isFinite(scale) && scale >= 2 ? scale : 5;
+			const start = npsScale === 11 ? 0 : 1;
+			const values = Array.from(
+				{ length: npsScale },
+				(_, index) => start + index
+			);
+			const usesSegmentedScale = values.length <= 7;
+			const containerClass = usesSegmentedScale
+				? 'feedback-survey-ces feedback-survey-rating-scale'
+				: 'feedback-survey-nps';
+			const buttonClass = usesSegmentedScale
+				? 'feedback-survey-page-rating-btn feedback-survey-nps-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn'
+				: 'feedback-survey-page-rating-btn feedback-survey-nps-btn';
 			return `
-				<div class="feedback-survey-nps" data-page-id="${pageId}">
-					${[...Array(11).keys()]
+				<div class="${containerClass}" data-page-id="${pageId}">
+					${values
 						.map((n) => {
 							const selected = currentRating === n ? ' selected' : '';
-							return `<button class="feedback-survey-page-rating-btn feedback-survey-nps-btn${selected}" data-page-id="${pageId}" data-score="${n}">${n}</button>`;
+							return `<button class="${buttonClass}${selected}" data-page-id="${pageId}" data-score="${n}">${n}</button>`;
 						})
 						.join('')}
 				</div>
@@ -295,12 +460,12 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		return `
-			<div class="feedback-survey-ces" data-page-id="${pageId}">
+			<div class="feedback-survey-ces feedback-survey-rating-scale" data-page-id="${pageId}">
 				${[...Array(scale).keys()]
 					.map((i) => {
 						const score = i + 1;
 						const selected = currentRating === score ? ' selected' : '';
-						return `<button class="feedback-survey-page-rating-btn feedback-survey-ces-btn${selected}" data-page-id="${pageId}" data-score="${score}">${score}</button>`;
+						return `<button class="feedback-survey-page-rating-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn${selected}" data-page-id="${pageId}" data-score="${score}">${score}</button>`;
 					})
 					.join('')}
 			</div>
@@ -310,9 +475,11 @@ export class SurveyWidget extends BaseWidget {
 
 	_renderMultipleChoicePage(page) {
 		const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
-		const config = page.multipleChoiceConfig || page.multiple_choice_config || {};
+		const config =
+			page.multipleChoiceConfig || page.multiple_choice_config || {};
 		const options = Array.isArray(config.options) ? config.options : [];
-		const allowMultiple = config.allow_multiple === true || config.multiple === true;
+		const allowMultiple =
+			config.allow_multiple === true || config.multiple === true;
 		const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
 		const selectedValues = Array.isArray(pageAnswer.values)
 			? pageAnswer.values
@@ -417,7 +584,9 @@ export class SurveyWidget extends BaseWidget {
 		const submitBtn = this.surveyElement.querySelector(
 			'.feedback-survey-submit'
 		);
-		submitBtn.addEventListener('click', () => this._handleSubmit());
+		if (submitBtn) {
+			submitBtn.addEventListener('click', () => this._handleSubmit());
+		}
 
 		const backBtn = this.surveyElement.querySelector('.feedback-survey-back');
 		if (backBtn) {
@@ -427,9 +596,11 @@ export class SurveyWidget extends BaseWidget {
 		const textarea = this.surveyElement.querySelector(
 			'.feedback-survey-textarea'
 		);
-		textarea.addEventListener('input', (e) => {
-			this.surveyState.feedback = e.target.value;
-		});
+		if (textarea) {
+			textarea.addEventListener('input', (e) => {
+				this.surveyState.feedback = e.target.value;
+			});
+		}
 
 		this._attachTypeSpecificEvents();
 
@@ -601,6 +772,7 @@ export class SurveyWidget extends BaseWidget {
 					btn.classList.remove('selected');
 				}
 			});
+		this._maybeAutoSubmit();
 	}
 
 	_selectCSAT(score) {
@@ -615,6 +787,7 @@ export class SurveyWidget extends BaseWidget {
 					btn.classList.remove('selected');
 				}
 			});
+		this._maybeAutoSubmit();
 	}
 
 	_selectCES(score) {
@@ -629,6 +802,14 @@ export class SurveyWidget extends BaseWidget {
 					btn.classList.remove('selected');
 				}
 			});
+		this._maybeAutoSubmit();
+	}
+
+	_maybeAutoSubmit() {
+		if (!this._shouldAutoSubmitOnSelect()) {
+			return;
+		}
+		this._handleSubmit();
 	}
 
 	_selectFrequency(freq) {
@@ -646,6 +827,9 @@ export class SurveyWidget extends BaseWidget {
 
 	async _handleSubmit() {
 		const type = this.surveyOptions.surveyType;
+		if (this.surveyState.isSubmitting) {
+			return;
+		}
 
 		if (this._isMultiPageSurvey()) {
 			if (!this._validateCurrentPage()) {
@@ -653,7 +837,10 @@ export class SurveyWidget extends BaseWidget {
 			}
 
 			const nextPageIndex = this._getNextPageIndex();
-			if (nextPageIndex !== -1 && nextPageIndex !== this.surveyState.currentPageIndex) {
+			if (
+				nextPageIndex !== -1 &&
+				nextPageIndex !== this.surveyState.currentPageIndex
+			) {
 				this.surveyState.currentPageIndex = nextPageIndex;
 				this._renderSurvey();
 				return;
@@ -669,6 +856,8 @@ export class SurveyWidget extends BaseWidget {
 			return;
 		}
 
+		this.surveyState.isSubmitting = true;
+
 		const respondent = this._getRespondentContext();
 		const normalizedPageAnswers = this._normalizePageAnswersForSubmit();
 		const mergedAnswers = {
@@ -695,16 +884,18 @@ export class SurveyWidget extends BaseWidget {
 			timestamp: new Date().toISOString(),
 		};
 
-		if (this.surveyOptions.onSubmit) {
-			this.surveyOptions.onSubmit(response);
-		}
-
 		try {
+			if (this.surveyOptions.onSubmit) {
+				this.surveyOptions.onSubmit(response);
+			}
+
 			const surveyId =
 				this.surveyOptions.surveyId || `local_${type}_${Date.now()}`;
 			await this.apiService.submitSurveyResponse(surveyId, responseData);
 		} catch (error) {
 			console.error('[SurveyWidget] Failed to submit survey:', error);
+		} finally {
+			this.surveyState.isSubmitting = false;
 		}
 
 		this.sdk.eventBus.emit('survey:submitted', { widget: this, response });
@@ -812,7 +1003,8 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		for (const page of this.surveyOptions.pages) {
-			const pageId = page.id || `page_${this.surveyOptions.pages.indexOf(page)}`;
+			const pageId =
+				page.id || `page_${this.surveyOptions.pages.indexOf(page)}`;
 			const answer = this.surveyState.pageAnswers[pageId];
 			if (answer && typeof answer.rating === 'number') {
 				return answer.rating;
@@ -824,7 +1016,9 @@ export class SurveyWidget extends BaseWidget {
 
 	_normalizePageAnswersForSubmit() {
 		const output = {};
-		for (const [pageId, answer] of Object.entries(this.surveyState.pageAnswers)) {
+		for (const [pageId, answer] of Object.entries(
+			this.surveyState.pageAnswers
+		)) {
 			if (answer == null) continue;
 			if (Array.isArray(answer.values) && answer.values.length > 0) {
 				output[pageId] = answer.values;
@@ -851,8 +1045,7 @@ export class SurveyWidget extends BaseWidget {
 				? this.sdk.getUserContext() || {}
 				: {};
 		const apiUserContext =
-			this.apiService &&
-			typeof this.apiService.getUserContext === 'function'
+			this.apiService && typeof this.apiService.getUserContext === 'function'
 				? this.apiService.getUserContext() || {}
 				: {};
 		const localUserContext = this.options.userContext || {};
@@ -900,7 +1093,15 @@ export class SurveyWidget extends BaseWidget {
 		const submitBtn = this.surveyElement.querySelector(
 			'.feedback-survey-submit'
 		);
-		submitBtn.parentNode.insertBefore(error, submitBtn);
+		const actions = this.surveyElement.querySelector(
+			'.feedback-survey-actions'
+		);
+		const anchor = submitBtn || actions;
+		if (anchor && anchor.parentNode) {
+			anchor.parentNode.insertBefore(error, anchor);
+		} else {
+			this.surveyElement.appendChild(error);
+		}
 
 		setTimeout(() => error.remove(), 3000);
 	}
@@ -963,6 +1164,7 @@ export class SurveyWidget extends BaseWidget {
 				customAnswers: {},
 				pageAnswers: {},
 				currentPageIndex: 0,
+				isSubmitting: false,
 				isVisible: false,
 			};
 		}

package/src/widgets/messenger/components/NavigationTabs.js

@@ -124,12 +124,7 @@ export class NavigationTabs {
 	}
 
 	_getMessagesIcon() {
-		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
-			<circle cx="128" cy="128" r="12"/>
-			<circle cx="84" cy="128" r="12"/>
-			<circle cx="172" cy="128" r="12"/>
-			<path d="M79.93,211.11a96,96,0,1,0-35-35h0L32.42,213.46a8,8,0,0,0,10.12,10.12l37.39-12.47Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
-		</svg>`;
+		return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M71.58,144,32,176V48a8,8,0,0,1,8-8H168a8,8,0,0,1,8,8v88a8,8,0,0,1-8,8Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M80,144v40a8,8,0,0,0,8,8h96.42L224,224V96a8,8,0,0,0-8-8H176" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>`;
 	}
 
 	_getHelpIcon() {

package/src/widgets/messenger/views/ChatView.js

@@ -116,10 +116,12 @@ export class ChatView {
 			<div class="messenger-compose-attachments-preview"></div>
 
 			<div class="messenger-chat-compose">
-				<button class="sdk-btn-icon messenger-compose-attach" aria-label="Attach file">
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="16" height="16" fill="none"/><path d="M160,80,76.69,164.69a16,16,0,0,0,22.63,22.62L198.63,86.63a32,32,0,0,0-45.26-45.26L54.06,142.06a48,48,0,0,0,67.88,67.88L204,128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-				</button>
-				<div class="messenger-compose-input-wrapper">
+<button class="sdk-btn-icon messenger-compose-attach" aria-label="Attach file">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="20" height="20">
+    <rect width="256" height="256" fill="none"/>
+    <path d="M160,80,76.69,164.69a16,16,0,0,0,22.63,22.62L198.63,86.63a32,32,0,0,0-45.26-45.26L54.06,142.06a48,48,0,0,0,67.88,67.88L204,128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+  </svg>
+</button>				<div class="messenger-compose-input-wrapper">
 					<textarea class="messenger-compose-input" placeholder="${placeholder}" rows="1"></textarea>
 				</div>
 				<button class="messenger-compose-send" aria-label="Send" disabled>

package/src/widgets/messenger/views/ConversationsView.js

@@ -69,11 +69,13 @@ export class ConversationsView {
 		this.element.innerHTML = `
         <div class="messenger-conversations-header">
             <h2>Messages</h2>
-            <button class="sdk-close-btn" aria-label="Close">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
-                    <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
-                </svg>
-            </button>
+           <button class="sdk-close-btn" aria-label="Close">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="18" height="18">
+    <rect width="256" height="256" fill="none"/>
+    <line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+    <line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+  </svg>
+</button>
         </div>
 
         <div class="messenger-conversations-body">