@@ -3,10 +3,8 @@ import { ClickAwayListener, Tooltip, useMediaQuery } from '@mui/material'
 
 import styles from './tooltip.module.scss'
 
-import { c } from '#/shared/lib/helpers'
-
 interface Props {
-	title?: string
+	title?: React.ReactNode
 	children: React.ReactNode
 	className?: string
 	maxWidth?: string
@@ -30,6 +28,11 @@ interface Props {
 	fullWidthTrigger?: boolean
 	/** На устройствах без hover (тач) открывать/закрывать по нажатию, снаружи — закрытие. */
 	tapToOpenOnMobile?: boolean
+	/** Controlled open (e.g. selection toolbar). */
+	open?: boolean
+	onClose?: () => void
+	/** Popper offset [skidding, distance]. Negative distance pulls tooltip closer to the anchor. */
+	offset?: [number, number]
 }
 /** Выше оверлеев модалок (см. template.module.scss — 9999) */
 const TOOLTIP_POPPER_Z_INDEX = 10050
@@ -44,25 +47,48 @@ export const TooltipCustom: React.FC<Props> = ({
 	wrapperWidth,
 	fullWidthTrigger = false,
 	tapToOpenOnMobile = false,
+	open: controlledOpen,
+	onClose,
+	offset,
 }) => {
 	const isTouchPrimary = useMediaQuery('(hover: none)', { noSsr: true })
 	const tapMode = Boolean(tapToOpenOnMobile && isTouchPrimary)
 	const [tapOpen, setTapOpen] = useState(false)
+	const isControlled = controlledOpen !== undefined
 
 	const triggerSpanStyle: React.CSSProperties | undefined = wrapperWidth
 		? { display: 'block', width: wrapperWidth, maxWidth: '100%', minWidth: 0 }
 		: undefined
 
+	const resolvedOpen = isControlled ? controlledOpen : tapMode ? tapOpen : undefined
+	const handleClose = () => {
+		if (isControlled) {
+			onClose?.()
+			return
+		}
+		if (tapMode) {
+			setTapOpen(false)
+		}
+	}
+
 	const tooltip = (
 		<Tooltip
-			open={tapMode ? tapOpen : undefined}
-			onClose={tapMode ? () => setTapOpen(false) : undefined}
-			disableHoverListener={tapMode}
-			disableFocusListener={tapMode}
-			disableTouchListener={tapMode}
+			open={resolvedOpen}
+			onClose={isControlled || tapMode ? handleClose : undefined}
+			disableHoverListener={isControlled || tapMode}
+			disableFocusListener={isControlled || tapMode}
+			disableTouchListener={isControlled || tapMode}
 			onClick={stopClickPropagation ? (e: React.MouseEvent) => e.stopPropagation() : undefined}
 			PopperProps={{
 				sx: { zIndex: TOOLTIP_POPPER_Z_INDEX },
+				modifiers: offset
+					? [
+							{
+								name: 'offset',
+								options: { offset },
+							},
+						]
+					: undefined,
 				...(stopClickPropagation
 					? {
 							onClick(e: React.MouseEvent) {
@@ -96,7 +122,7 @@ export const TooltipCustom: React.FC<Props> = ({
 				className={fullWidthTrigger ? styles.triggerFullWidth : undefined}
 				style={triggerSpanStyle}
 				onClick={
-					tapMode
+					tapMode && !isControlled
 						? (e) => {
 								if (stopClickPropagation) e.stopPropagation()
 								setTapOpen((v) => !v)
@@ -109,5 +135,15 @@ export const TooltipCustom: React.FC<Props> = ({
 		</Tooltip>
 	)
 
-	return tapMode ? <ClickAwayListener onClickAway={() => setTapOpen(false)}>{tooltip}</ClickAwayListener> : tooltip
+	if (isControlled) {
+		return (
+			<ClickAwayListener onClickAway={handleClose} mouseEvent='onMouseUp' touchEvent='onTouchEnd'>
+				<span className={fullWidthTrigger ? styles.triggerFullWidth : undefined} style={triggerSpanStyle}>
+					{tooltip}
+				</span>
+			</ClickAwayListener>
+		)
+	}
+
+	return tapMode ? <ClickAwayListener onClickAway={handleClose}>{tooltip}</ClickAwayListener> : tooltip
 }
@@ -13,6 +13,10 @@ export async function parseStreamErrorResponse(response: Response): Promise<stri
 	}
 }
 
+function sanitizeContent(content: string): string {
+	return content.replace(/\r\n|\r|\n/g, ' ').replace(/ {2,}/g, ' ').trim()
+}
+
 export const chatMessagesApi = {
 	getMessages: async (chatUid: string, offset: number, token?: string) => {
 		try {
@@ -40,10 +44,21 @@ export const chatMessagesApi = {
 
 	sendMessage: async <T>(chatUid: string, dataForSend: MessageSend<T> | FormData, token?: string) => {
 		const headerDataType = dataForSend instanceof FormData ? 'multipart/form-data' : 'application/json'
+		const payload =
+			dataForSend instanceof FormData
+				? dataForSend
+				: { ...dataForSend, content: sanitizeContent(dataForSend.content) }
+
+		if (payload instanceof FormData && payload.has('content')) {
+			const raw = payload.get('content')
+			if (typeof raw === 'string') {
+				payload.set('content', sanitizeContent(raw))
+			}
+		}
 
 		return axios.post<IMessageRequest, AxiosResponse<Message[] | { detail: string }>>(
 			getApiUrl() + `/chats/${chatUid}/messages/`,
-			dataForSend,
+			payload,
 			{
 				withCredentials: true,
 				headers: {
@@ -62,6 +77,12 @@ export const chatMessagesApi = {
 		}
 
 		if (dataForSend instanceof FormData) {
+			if (dataForSend.has('content')) {
+				const raw = dataForSend.get('content')
+				if (typeof raw === 'string') {
+					dataForSend.set('content', sanitizeContent(raw))
+				}
+			}
 			return fetch(url, {
 				method: 'POST',
 				headers: streamHeaders,
@@ -71,7 +92,8 @@ export const chatMessagesApi = {
 			})
 		}
 
-		const { content, info } = dataForSend
+		const { info } = dataForSend
+		const content = sanitizeContent(dataForSend.content)
 
 		return fetch(url, {
 			method: 'POST',
@@ -8,6 +8,26 @@
 	border: 2px solid rgb(66, 66, 72) !important;
 }
 
+.wrapperWithQuote {
+	align-items: flex-end;
+}
+
+.inputColumnWithQuote {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	width: 100%;
+	min-width: 0;
+	max-height: 180px;
+	overflow-y: auto;
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
 .wrapperImages {
 	background-color: #151518;
 }
@@ -19,6 +39,7 @@
 .settingsIcon {
 	min-width: 21px;
 	min-height: 21px;
+	align-self: center;
 }
 
 .area {
@@ -52,6 +73,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	flex-shrink: 0;
 }
 
 .divider {
@@ -9,6 +9,7 @@ import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 import { ChatDisclaimer } from '#/shared/ui/chat-disclaimer/chat-disclaimer'
 
 import { PredictPrice } from './predict-price'
+import { QuoteCodeBlock } from './quote-code-block'
 
 import classes from './model-input.module.scss'
 
@@ -43,6 +44,49 @@ function buildRequiredForVersion(inputs: IModelInputs[], currentVersion: string)
 	return [...requiredTypes]
 }
 
+function composeMessage(text: string, quote: string | null | undefined): string {
+	const parts: string[] = []
+	if (quote != null && quote !== '') {
+		parts.push('```' + quote + '```')
+	}
+	if (text !== '') {
+		parts.push(text)
+	}
+	return parts.join(' ')
+}
+
+type DraftPayload = {
+	text: string
+	quote: string | null
+}
+
+function readDraft(raw: string | null): DraftPayload | null {
+	if (raw === null || raw === '') {
+		return null
+	}
+	try {
+		const parsed = JSON.parse(raw) as unknown
+		if (parsed && typeof parsed === 'object' && 'text' in parsed) {
+			const draft = parsed as { text?: unknown; quote?: unknown }
+			return {
+				text: typeof draft.text === 'string' ? draft.text : '',
+				quote: typeof draft.quote === 'string' && draft.quote !== '' ? draft.quote : null,
+			}
+		}
+	} catch {
+		// legacy: plain text string
+	}
+	return { text: raw, quote: null }
+}
+
+function writeDraft(key: string, text: string, quote: string | null) {
+	if (text === '' && quote == null) {
+		window.localStorage.removeItem(key)
+		return
+	}
+	window.localStorage.setItem(key, JSON.stringify({ text, quote } satisfies DraftPayload))
+}
+
 interface Input {
 	loading: boolean
 	wonderMe?: () => void
@@ -59,6 +103,8 @@ interface Input {
 	viewMobileSettings: () => void
 	currentVersion: string
 	resendValue?: string
+	quoteValue?: string | null
+	onQuoteChange?: (value: string | null) => void
 	value?: string
 	onValueChange?: (value: string) => void
 	predictedPrice?: string | null
@@ -76,6 +122,8 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 	viewMobileSettings,
 	currentVersion,
 	resendValue,
+	quoteValue,
+	onQuoteChange,
 	blocked,
 	value: externalValue,
 	onValueChange: externalOnChange,
@@ -104,6 +152,8 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 	const draftHydratedRef = useRef(false)
 	const setValueRef = useRef(setValue)
 	setValueRef.current = setValue
+	const onQuoteChangeRef = useRef(onQuoteChange)
+	onQuoteChangeRef.current = onQuoteChange
 
 	const clearDraft = useCallback(() => {
 		try {
@@ -111,11 +161,14 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 		} catch {
 		}
 		setValue('')
-	}, [draftStorageKey, setValue])
+		onQuoteChange?.(null)
+	}, [draftStorageKey, setValue, onQuoteChange])
 
 	const valueRef = useRef(value)
+	const quoteRef = useRef(quoteValue)
 	const requiredRef = useRef(required)
 	valueRef.current = value
+	quoteRef.current = quoteValue
 	requiredRef.current = required
 
 	const wrappedSendMessage = useCallback(
@@ -129,6 +182,17 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 		[sendMessage]
 	)
 
+	const submitMessage = useCallback(() => {
+		const message = composeMessage(valueRef.current, quoteRef.current)
+		if (!message) return false
+		const isSend = wrappedSendMessage(message, requiredRef.current)
+		if (isSend) {
+			clearDraft()
+			if (unpinImage) unpinImage()
+		}
+		return isSend
+	}, [clearDraft, unpinImage, wrappedSendMessage])
+
 	useEffect(() => {
 		if (input_types) {
 			setRequired(buildRequiredForVersion(input_types, currentVersion))
@@ -179,9 +243,9 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 
 	useEffect(() => {
 		if (resendValue) {
-			setValue(resendValue)
+			setValueRef.current(resendValue)
 		}
-	}, [resendValue, setValue])
+	}, [resendValue])
 
 	useEffect(() => {
 		draftHydratedRef.current = false
@@ -194,16 +258,21 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 				if (resendValue) {
 					return
 				}
-				const saved = window.localStorage.getItem(draftStorageKey)
-				if (saved !== null && saved !== '' && value === '') {
-					setValueRef.current(saved)
+				const draft = readDraft(window.localStorage.getItem(draftStorageKey))
+				if (draft) {
+					if (draft.text !== '' && value === '') {
+						setValueRef.current(draft.text)
+					}
+					if (draft.quote) {
+						onQuoteChangeRef.current?.(draft.quote)
+					}
 					return
 				}
 			}
-			window.localStorage.setItem(draftStorageKey, value)
+			writeDraft(draftStorageKey, value, quoteValue ?? null)
 		} catch {
 		}
-	}, [draftStorageKey, resendValue, value])
+	}, [draftStorageKey, resendValue, value, quoteValue])
 
 	useEffect(() => {
 		const handleTourSuggestedQuery = (e: CustomEvent<{ query: string }>) => {
@@ -219,22 +288,51 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 
 	useEffect(() => {
 		const handleTourSendMessage = () => {
-			const { current: msg } = valueRef
-			const { current: req } = requiredRef
-			if (msg && sendMessage(msg, req)) {
-				clearDraft()
-				if (unpinImage) unpinImage()
-				window.dispatchEvent(new CustomEvent('user-sent-message'))
-			}
+			submitMessage()
 		}
 		window.addEventListener('tour-send-message', handleTourSendMessage)
 		return () => window.removeEventListener('tour-send-message', handleTourSendMessage)
-	}, [clearDraft, sendMessage, unpinImage])
+	}, [submitMessage])
+
+	const composedForSend = composeMessage(value, quoteValue)
+	const hasQuote = quoteValue != null
+
+	const textarea = (
+		<textarea
+			onInput={(e) => {
+				const target = e.target as HTMLTextAreaElement
+				target.style.height = 'auto'
+				target.style.height = target.scrollHeight + 'px'
+			}}
+			onKeyDown={async (e) => {
+				if (e.key === 'Backspace' && hasQuote && value === '') {
+					e.preventDefault()
+					onQuoteChange?.(null)
+					return
+				}
+				if (e.shiftKey && e.key === 'Enter') {
+				} else if (e.key === 'Enter') {
+					e.preventDefault()
+					submitMessage()
+				}
+			}}
+			rows={1}
+			placeholder={disabled || blocked ? 'Ввод текста недоступен для этой модели' : 'Ваше сообщение'}
+			className={classes.area}
+			disabled={disabled || blocked}
+			onChange={(e) => setValue(e.target.value)}
+			value={value}
+		></textarea>
+	)
 
 	return (
 		<>
 		<div
-			className={c(classes.wrapper, styles === 'images' ? classes.wrapperImages : classes.wrapperTransparent)}
+			className={c(
+				classes.wrapper,
+				hasQuote && classes.wrapperWithQuote,
+				styles === 'images' ? classes.wrapperImages : classes.wrapperTransparent,
+			)}
 		>
 			{!desktop && (
 				<svg
@@ -254,30 +352,19 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 					/>
 				</svg>
 			)}
-			<textarea
-				onInput={(e) => {
-					const target = e.target as HTMLTextAreaElement
-					target.style.height = 'auto'
-					target.style.height = target.scrollHeight + 'px'
-				}}
-				onKeyDown={async (e) => {
-					if (e.shiftKey && e.key === 'Enter') {
-					} else if (e.key === 'Enter') {
-						e.preventDefault()
-						const isSend = wrappedSendMessage(value, required)
-						if (isSend) {
-							clearDraft()
-							if (unpinImage) unpinImage()
-						}
-					}
-				}}
-				rows={1}
-				placeholder={disabled || blocked ? 'Ввод текста недоступен для этой модели' : 'Ваше сообщение'}
-				className={classes.area}
-				disabled={disabled || blocked}
-				onChange={(e) => setValue(e.target.value)}
-				value={value}
-			></textarea>
+			{hasQuote ? (
+				<div className={classes.inputColumnWithQuote}>
+					<QuoteCodeBlock
+						value={quoteValue}
+						disabled={disabled || blocked}
+						onChange={(next) => onQuoteChange?.(next)}
+						onRemove={() => onQuoteChange?.(null)}
+					/>
+					{textarea}
+				</div>
+			) : (
+				textarea
+			)}
 
 			<div className={classes.endAdornment}>
 				<PredictPrice isChatBot={styles === 'chats'} token={Number(predictedPrice) } />
@@ -300,13 +387,16 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 					<SendBtn
 						loading={loading}
 						unpinImage={unpinImage}
-						input={value}
-						sendMessage={wrappedSendMessage}
-						setInput={externalOnChange ? 
+						input={composedForSend}
+						sendMessage={() => submitMessage()}
+						setInput={externalOnChange ?
 							(val: string | ((prev: string) => string)) => {
 								const newVal = typeof val === 'function' ? val(value) : val
 								externalOnChange(newVal)
-							} : 
+								if (newVal === '') {
+									onQuoteChange?.(null)
+								}
+							} :
 							(val: string | ((prev: string) => string)) => {
 								const next = typeof val === 'function' ? val(value) : val
 								if (next === '') {
@@ -0,0 +1,66 @@
+.codeBlock {
+	position: relative;
+	width: 100%;
+	min-width: 0;
+	padding: 10px 28px 10px 12px;
+	border-radius: 10px;
+	border: 1px solid #303035;
+	background-color: #1e1e22;
+	box-sizing: border-box;
+}
+
+.codeBlockRemove {
+	position: absolute;
+	top: 4px;
+	right: 6px;
+	width: 22px;
+	height: 22px;
+	padding: 0;
+	border: 0;
+	border-radius: 6px;
+	background: transparent;
+	color: #a6a5a5;
+	font-size: 18px;
+	line-height: 1;
+	cursor: pointer;
+
+	&:hover:not(:disabled) {
+		color: #f9fafb;
+	}
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+}
+
+.codeArea {
+	width: 100%;
+	resize: none;
+	border: none;
+	outline: none;
+	padding: 0;
+	margin: 0;
+	max-height: 120px;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	font-size: 14px;
+	line-height: 1.4;
+	color: #f9fafb;
+	background: transparent;
+	overflow-y: auto;
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+}
@@ -0,0 +1,54 @@
+import React, { useLayoutEffect, useRef } from 'react'
+
+import styles from './quote-code-block.module.scss'
+
+type Props = {
+	value: string
+	onChange: (value: string) => void
+	onRemove: () => void
+	disabled?: boolean
+}
+
+function autoResize(el: HTMLTextAreaElement | null) {
+	if (!el) return
+	el.style.height = 'auto'
+	el.style.height = `${el.scrollHeight}px`
+}
+
+export function QuoteCodeBlock({ value, onChange, onRemove, disabled }: Props) {
+	const areaRef = useRef<HTMLTextAreaElement | null>(null)
+
+	useLayoutEffect(() => {
+		autoResize(areaRef.current)
+	}, [value])
+
+	return (
+		<div className={styles.codeBlock}>
+			<button
+				type='button'
+				className={styles.codeBlockRemove}
+				onClick={onRemove}
+				disabled={disabled}
+				aria-label='Убрать цитату'
+			>
+				×
+			</button>
+			<textarea
+				ref={areaRef}
+				rows={1}
+				className={styles.codeArea}
+				disabled={disabled}
+				value={value}
+				onChange={(e) => {
+					const next = e.target.value
+					if (next === '') {
+						onRemove()
+						return
+					}
+					onChange(next)
+				}}
+				onInput={(e) => autoResize(e.currentTarget)}
+			/>
+		</div>
+	)
+}
@@ -0,0 +1,39 @@
+export type ContentSegment =
+	| { type: 'text'; content: string }
+	| { type: 'code'; content: string }
+
+/** Closed ``` fences only; unclosed markers stay as plain text. */
+export function parseCodeFenceSegments(value: string): ContentSegment[] {
+	if (!value) {
+		return [{ type: 'text', content: '' }]
+	}
+
+	const segments: ContentSegment[] = []
+	// Многострочный ```\ncode\n``` и однострочный ```code``` (как уходит на бэк)
+	const re = /```[^\n]*\r?\n([\s\S]*?)```|```([^`\n]+)```/g
+	let lastIndex = 0
+	let match: RegExpExecArray | null
+
+	while ((match = re.exec(value)) !== null) {
+		if (match.index > lastIndex) {
+			segments.push({ type: 'text', content: value.slice(lastIndex, match.index) })
+		}
+
+		let code = match[1] ?? match[2] ?? ''
+		if (code.endsWith('\n')) {
+			code = code.slice(0, -1)
+		}
+		segments.push({ type: 'code', content: code })
+		lastIndex = match.index + match[0].length
+	}
+
+	if (lastIndex < value.length) {
+		segments.push({ type: 'text', content: value.slice(lastIndex) })
+	}
+
+	if (segments.length === 0) {
+		return [{ type: 'text', content: value }]
+	}
+
+	return segments
+}
@@ -30,11 +30,8 @@ export const SendBtn = ({ loading, unpinImage, input, sendMessage, setInput, req
 			id='text-models-tour-4'
 			onClick={async () => {
 				if (!loading) {
-					const isSend = sendMessage(input, required)
-					if (isSend) {
-						setInput('')
-						if (unpinImage) unpinImage()
-					}
+					// Parent (submitMessage) already clears draft / quote / image on success
+					sendMessage(input, required)
 				}
 			}}
 			height={28}
@@ -5,13 +5,14 @@ import Image from 'next/image'
 
 import { TooltipCustom } from '#/shared'
 import { formatDate } from '#/shared/lib/helpers'
-import { Markdown } from '../../lib/markdown/markdown'
-import { parseThinkBlocks, stripThinkFromMain } from '../../lib/parse-think-blocks'
+import { Markdown } from '../../../lib/markdown/markdown'
+import { parseThinkBlocks, stripThinkFromMain } from '../../../lib/parse-think-blocks'
 
 import styles from './bot-message.module.scss'
-import { FullscreenIcon } from './icons/fullscreen-icon'
-import { FullscreenMessageModal } from './fullscreen-message-modal'
-import { ThinkBlock } from './think-block'
+import { FullscreenIcon } from '../icons/fullscreen-icon'
+import { FullscreenMessageModal } from '../fullscreen-message-modal/fullscreen-message-modal'
+import { SelectionReplyPopover, selectionReplyStyles, useSelectionReply } from '../selection-reply'
+import { ThinkBlock } from '../think-block/think-block'
 
 export function BotMessage(props: any) {
 	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
@@ -19,6 +20,21 @@ export function BotMessage(props: any) {
 	const [markdownMessage, setMarkDownMessage] = React.useState<string>('')
 	const [fullscreenModalOpen, setFullscreenModalOpen] = React.useState(false)
 
+	const {
+		contentRef,
+		onContentMouseUp,
+		onContentTouchEnd,
+		selectionVirtualAnchor,
+		placement,
+		clearSelectionTooltip,
+		handleAskSelection,
+		handleCopySelection,
+	} = useSelectionReply({
+		desktop: Boolean(props.desktop),
+		onQuote: props.setQuoteValue,
+		enabled: Boolean(props.setQuoteValue),
+	})
+
 	const copy = (text: string) => {
 		navigator.clipboard.writeText(text)
 	}
@@ -132,62 +148,76 @@ export function BotMessage(props: any) {
 						</Typography>
 					</Stack>
 					<Box display='flex' width='100%' minWidth={0}>
-						<Box
-							onClick={() => {
-								if (props.message.file) {
-									window.open(props.message.file, '_blank')
-								}
-							}}
-							className='smallScroll'
-							sx={{
-								flex: 1,
-								minWidth: 0,
-								overflowY: 'auto',
-								overflowX: 'hidden',
-								position: 'relative',
-								padding: '0px 16px',
-								border: `1px solid #303035`,
-								color: '#f9fafb',
-								boxShadow: 'none',
-								lineHeight: '22.5px',
-								fontSize: '15px',
-								textAlign: 'left',
-								fontFamily: 'Inter,sans-serif',
-								borderRadius: '13px',
-								...flexStyle,
-							}}
-						>
-							{props.message.file ? (
-								<svg width='16' height='18' viewBox='0 0 15 19' fill='none' xmlns='http://www.w3.org/2000/svg'>
-									<path
-										fillRule='evenodd'
-										clipRule='evenodd'
-										d='M10.3286 0.578662C9.95416 0.20795 9.44851 0 8.92158 0H2C0.895433 0 0 0.895431 0 2V17C0 18.1046 0.895431 19 2 19H13C14.1046 19 15 18.1046 15 17V6.03743C15 5.50349 14.7865 4.99173 14.4071 4.61609L10.3286 0.578662ZM10.0669 5.37846C9.79079 5.37846 9.56693 5.1546 9.56693 4.87846V2.19238C9.56693 1.74815 10.103 1.52452 10.4187 1.83705L13.132 4.52313C13.4495 4.83737 13.227 5.37846 12.7803 5.37846H11.7815H10.0669Z'
-										fill='#7f7df3'
-									/>
-								</svg>
-							) : (
-								''
-							)}
-							{props.message.file ? (
-								<Markdown content={rawContent} streaming={props.isStreaming} />
-							) : (
-								<>
-									{thinkContents.map((thinkContent, index) => (
-										<ThinkBlock
-											key={`${props.message.uid}-think-${index}`}
-											content={thinkContent}
-											streaming={Boolean(props.isStreaming && index === thinkContents.length - 1)}
-										/>
-									))}
-									{displayMainContent ? (
-										<Markdown
-											content={displayMainContent}
-											streaming={props.isStreaming && !isThinkStreaming && !parsedThink.hasIncompleteThink}
+						<Box flex={1} minWidth={0}>
+							<Box
+								ref={contentRef}
+								onMouseUp={onContentMouseUp}
+								onTouchEnd={onContentTouchEnd}
+								onClick={() => {
+									if (props.message.file) {
+										window.open(props.message.file, '_blank')
+									}
+								}}
+								className={`${selectionReplyStyles.messageContent} smallScroll`}
+								sx={{
+									width: '100%',
+									minWidth: 0,
+									overflowY: 'auto',
+									overflowX: 'hidden',
+									position: 'relative',
+									padding: '0px 16px',
+									border: `1px solid #303035`,
+									color: '#f9fafb',
+									boxShadow: 'none',
+									lineHeight: '22.5px',
+									fontSize: '15px',
+									textAlign: 'left',
+									fontFamily: 'Inter,sans-serif',
+									borderRadius: '13px',
+									...flexStyle,
+								}}
+							>
+								{props.message.file ? (
+									<svg width='16' height='18' viewBox='0 0 15 19' fill='none' xmlns='http://www.w3.org/2000/svg'>
+										<path
+											fillRule='evenodd'
+											clipRule='evenodd'
+											d='M10.3286 0.578662C9.95416 0.20795 9.44851 0 8.92158 0H2C0.895433 0 0 0.895431 0 2V17C0 18.1046 0.895431 19 2 19H13C14.1046 19 15 18.1046 15 17V6.03743C15 5.50349 14.7865 4.99173 14.4071 4.61609L10.3286 0.578662ZM10.0669 5.37846C9.79079 5.37846 9.56693 5.1546 9.56693 4.87846V2.19238C9.56693 1.74815 10.103 1.52452 10.4187 1.83705L13.132 4.52313C13.4495 4.83737 13.227 5.37846 12.7803 5.37846H11.7815H10.0669Z'
+											fill='#7f7df3'
 										/>
-									) : null}
-								</>
-							)}
+									</svg>
+								) : (
+									''
+								)}
+								{props.message.file ? (
+									<Markdown content={rawContent} streaming={props.isStreaming} />
+								) : (
+									<>
+										{thinkContents.map((thinkContent, index) => (
+											<ThinkBlock
+												key={`${props.message.uid}-think-${index}`}
+												content={thinkContent}
+												streaming={Boolean(props.isStreaming && index === thinkContents.length - 1)}
+											/>
+										))}
+										{displayMainContent ? (
+											<Markdown
+												content={displayMainContent}
+												streaming={props.isStreaming && !isThinkStreaming && !parsedThink.hasIncompleteThink}
+											/>
+										) : null}
+									</>
+								)}
+							</Box>
+							{selectionVirtualAnchor ? (
+								<SelectionReplyPopover
+									anchor={selectionVirtualAnchor}
+									placement={placement}
+									onClose={clearSelectionTooltip}
+									onReply={handleAskSelection}
+									onCopy={handleCopySelection}
+								/>
+							) : null}
 						</Box>
 						<Box marginLeft={1} flexShrink={0}>
 							<Box
@@ -0,0 +1 @@
+export * from './bot-message'
@@ -3,12 +3,12 @@ import { Box, MenuItem, Select, SelectChangeEvent, Typography } from '@mui/mater
 import Dialog from '@mui/material/Dialog'
 import Image from 'next/image'
 
-import { Markdown } from '../../lib/markdown/markdown'
-import { parseThinkBlocks, stripThinkFromMain } from '../../lib/parse-think-blocks'
+import { Markdown } from '../../../lib/markdown/markdown'
+import { parseThinkBlocks, stripThinkFromMain } from '../../../lib/parse-think-blocks'
 
-import { ZoomOutIcon as ZoomInIcon } from './icons/zoom-in-icon'
-import { ZoomOutIcon } from './icons/zoom-out-icon'
-import { ThinkBlock } from './think-block'
+import { ZoomOutIcon as ZoomInIcon } from '../icons/zoom-in-icon'
+import { ZoomOutIcon } from '../icons/zoom-out-icon'
+import { ThinkBlock } from '../think-block/think-block'
 
 import styles from './fullscreen-message-modal.module.scss'
 
@@ -0,0 +1 @@
+export * from './fullscreen-message-modal'
@@ -0,0 +1 @@
+export * from './preview-view'
@@ -0,0 +1,3 @@
+export { SelectionReplyPopover } from './selection-reply-popover'
+export { useSelectionReply } from './use-selection-reply'
+export { default as selectionReplyStyles } from './selection-reply.module.scss'
@@ -0,0 +1,66 @@
+import React, { useState } from 'react'
+import { ClickAwayListener, Popper } from '@mui/material'
+
+import styles from './selection-reply.module.scss'
+import type { SelectionVirtualAnchor } from './use-selection-reply'
+
+const SELECTION_TOOLTIP_Z_INDEX = 10050
+
+type Props = {
+	anchor: SelectionVirtualAnchor
+	placement: 'top' | 'bottom'
+	onClose: () => void
+	onReply: () => void
+	onCopy: () => void
+}
+
+export function SelectionReplyPopover({ anchor, placement, onClose, onReply, onCopy }: Props) {
+	const [arrowEl, setArrowEl] = useState<HTMLElement | null>(null)
+
+	return (
+		<Popper
+			open
+			anchorEl={anchor}
+			placement={placement}
+			className={styles.selectionTooltipPopper}
+			modifiers={[
+				{
+					name: 'offset',
+					options: {
+						offset: [0, 12],
+					},
+				},
+				{
+					name: 'arrow',
+					enabled: Boolean(arrowEl),
+					options: {
+						element: arrowEl,
+						padding: 8,
+					},
+				},
+				{
+					name: 'preventOverflow',
+					options: {
+						padding: 8,
+					},
+				},
+			]}
+			sx={{ zIndex: SELECTION_TOOLTIP_Z_INDEX }}
+		>
+			<div>
+				<ClickAwayListener onClickAway={onClose} mouseEvent='onMouseUp' touchEvent='onTouchEnd'>
+					<div className={styles.selectionTooltip} onMouseDown={(e) => e.preventDefault()}>
+						<button type='button' className={styles.selectionTooltipButton} onClick={onReply}>
+							Ответить
+						</button>
+						<span className={styles.selectionTooltipDivider} />
+						<button type='button' className={styles.selectionTooltipButton} onClick={onCopy}>
+							Копировать
+						</button>
+						<span ref={setArrowEl} className={styles.selectionTooltipArrow} />
+					</div>
+				</ClickAwayListener>
+			</div>
+		</Popper>
+	)
+}
@@ -0,0 +1,79 @@
+.messageContent {
+	&::selection,
+	& *::selection {
+		background-color: rgba(127, 125, 243, 0.35);
+		color: inherit;
+	}
+}
+
+.messageContentUser {
+	&::selection,
+	& *::selection {
+		background-color: rgba(40, 38, 120, 0.55);
+		color: inherit;
+	}
+}
+
+.selectionTooltipPopper {
+	&[data-popper-placement*='top'] .selectionTooltipArrow {
+		bottom: 0;
+		left: 0;
+		margin-bottom: -5px;
+	}
+
+	&[data-popper-placement*='bottom'] .selectionTooltipArrow {
+		top: 0;
+		left: 0;
+		margin-top: -5px;
+	}
+}
+
+.selectionTooltip {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 13px;
+	background: #4b4b4b;
+	border-radius: 10px;
+	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.04), 0px 4px 32px rgba(0, 0, 0, 0.16);
+}
+
+.selectionTooltipArrow {
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	pointer-events: none;
+
+	&::before {
+		content: '';
+		display: block;
+		width: 100%;
+		height: 100%;
+		background: #4b4b4b;
+		transform: rotate(45deg);
+	}
+}
+
+.selectionTooltipButton {
+	background: transparent;
+	border: 0;
+	padding: 2px 6px;
+	cursor: pointer;
+	color: #7f7df3;
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 1.3;
+	white-space: nowrap;
+
+	&:hover {
+		color: #9b99ff;
+	}
+}
+
+.selectionTooltipDivider {
+	width: 1px;
+	height: 14px;
+	background: rgba(127, 125, 243, 0.35);
+	flex-shrink: 0;
+}
@@ -0,0 +1,216 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+type SelectionRect = {
+	top: number
+	left: number
+	width: number
+	height: number
+	bottom: number
+	right: number
+}
+
+type SelectionTooltipState = {
+	text: string
+	rect: SelectionRect
+}
+
+export type SelectionVirtualAnchor = {
+	getBoundingClientRect: () => DOMRect
+	contextElement?: Element
+}
+
+function toSelectionRect(rect: DOMRect): SelectionRect {
+	return {
+		top: rect.top,
+		left: rect.left,
+		width: rect.width,
+		height: rect.height,
+		bottom: rect.bottom,
+		right: rect.right,
+	}
+}
+
+function getChatViewportEl(from: HTMLElement | null): HTMLElement | null {
+	return from?.closest('[data-chat-viewport]') ?? null
+}
+
+function isRectInChatViewport(rect: SelectionRect | DOMRect, viewport: HTMLElement | null): boolean {
+	if (!viewport) {
+		return false
+	}
+	const bounds = viewport.getBoundingClientRect()
+	return (
+		rect.bottom > bounds.top &&
+		rect.top < bounds.bottom &&
+		rect.right > bounds.left &&
+		rect.left < bounds.right
+	)
+}
+
+type Options = {
+	desktop: boolean
+	onQuote?: (value: string | null) => void
+	enabled?: boolean
+}
+
+export function useSelectionReply({ desktop, onQuote, enabled = true }: Options) {
+	const [selectionTooltip, setSelectionTooltip] = useState<SelectionTooltipState | null>(null)
+	const contentRef = useRef<HTMLDivElement | null>(null)
+	const ignoreClickAwayRef = useRef(false)
+
+	const clearSelectionTooltip = useCallback(() => {
+		if (ignoreClickAwayRef.current) {
+			return
+		}
+		setSelectionTooltip(null)
+	}, [])
+
+	const getSelectionInsideContent = useCallback(() => {
+		if (!enabled) {
+			return null
+		}
+
+		const selection = window.getSelection()
+		if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+			return null
+		}
+
+		const text = selection.toString()
+		if (!text.trim()) {
+			return null
+		}
+
+		const range = selection.getRangeAt(0)
+		const container = contentRef.current
+		if (!container?.contains(range.commonAncestorContainer)) {
+			return null
+		}
+
+		const rect = range.getBoundingClientRect()
+		if (!rect.width && !rect.height) {
+			return null
+		}
+
+		const chatViewport = getChatViewportEl(container)
+		if (!isRectInChatViewport(rect, chatViewport)) {
+			return null
+		}
+
+		return { text, rect: toSelectionRect(rect) }
+	}, [enabled])
+
+	const selectionVirtualAnchor = useMemo<SelectionVirtualAnchor | null>(() => {
+		if (!selectionTooltip) {
+			return null
+		}
+		const { rect } = selectionTooltip
+		return {
+			getBoundingClientRect: () => new DOMRect(rect.left, rect.top, rect.width, rect.height),
+			contextElement: contentRef.current ?? undefined,
+		}
+	}, [selectionTooltip])
+
+	const showSelectionTooltip = useCallback(() => {
+		const next = getSelectionInsideContent()
+		if (next) {
+			ignoreClickAwayRef.current = true
+			setSelectionTooltip(next)
+			window.setTimeout(() => {
+				ignoreClickAwayRef.current = false
+			}, 300)
+			return
+		}
+		setSelectionTooltip(null)
+	}, [getSelectionInsideContent])
+
+	const handleContentMouseUp = useCallback(() => {
+		showSelectionTooltip()
+	}, [showSelectionTooltip])
+
+	const handleContentTouchEnd = useCallback(() => {
+		window.setTimeout(() => {
+			showSelectionTooltip()
+		}, 50)
+	}, [showSelectionTooltip])
+
+	const handleAskSelection = useCallback(() => {
+		if (!selectionTooltip?.text || !onQuote) {
+			return
+		}
+		onQuote(selectionTooltip.text)
+		window.getSelection()?.removeAllRanges()
+		setSelectionTooltip(null)
+	}, [onQuote, selectionTooltip])
+
+	const handleCopySelection = useCallback(() => {
+		if (!selectionTooltip?.text) {
+			return
+		}
+		navigator.clipboard.writeText(selectionTooltip.text)
+		window.getSelection()?.removeAllRanges()
+		setSelectionTooltip(null)
+	}, [selectionTooltip])
+
+	useEffect(() => {
+		if (!enabled) {
+			return
+		}
+
+		let timeoutId = 0
+
+		const handleSelectionChange = () => {
+			window.clearTimeout(timeoutId)
+			timeoutId = window.setTimeout(() => {
+				const next = getSelectionInsideContent()
+				if (next) {
+					ignoreClickAwayRef.current = true
+					setSelectionTooltip(next)
+					window.setTimeout(() => {
+						ignoreClickAwayRef.current = false
+					}, 300)
+					return
+				}
+				setSelectionTooltip(null)
+			}, 120)
+		}
+
+		document.addEventListener('selectionchange', handleSelectionChange)
+		return () => {
+			window.clearTimeout(timeoutId)
+			document.removeEventListener('selectionchange', handleSelectionChange)
+		}
+	}, [enabled, getSelectionInsideContent])
+
+	useEffect(() => {
+		if (!enabled) {
+			return
+		}
+
+		let scrollEndTimeout = 0
+
+		const handleScroll = () => {
+			setSelectionTooltip((current) => (current ? null : current))
+			window.clearTimeout(scrollEndTimeout)
+			scrollEndTimeout = window.setTimeout(() => {
+				showSelectionTooltip()
+			}, 150)
+		}
+
+		window.addEventListener('scroll', handleScroll, true)
+		return () => {
+			window.clearTimeout(scrollEndTimeout)
+			window.removeEventListener('scroll', handleScroll, true)
+		}
+	}, [enabled, showSelectionTooltip])
+
+	return {
+		contentRef,
+		onContentMouseUp: handleContentMouseUp,
+		onContentTouchEnd: handleContentTouchEnd,
+		selectionVirtualAnchor,
+		placement: (desktop ? 'top' : 'bottom') as 'top' | 'bottom',
+		clearSelectionTooltip,
+		handleAskSelection,
+		handleCopySelection,
+	}
+}
@@ -0,0 +1 @@
+export * from './think-block'
@@ -0,0 +1 @@
+export * from './user-message'
@@ -0,0 +1,35 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	width: 100%;
+	min-width: 0;
+}
+
+.text {
+	margin: 0;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	word-break: break-word;
+}
+
+.codeBlock {
+	width: 100%;
+	min-width: 0;
+	padding: 10px 12px;
+	border-radius: 10px;
+	border: 1px solid rgba(255, 255, 255, 0.22);
+	background-color: rgba(21, 21, 24, 0.45);
+	box-sizing: border-box;
+}
+
+.code {
+	margin: 0;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	font-size: 14px;
+	line-height: 1.4;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	word-break: break-word;
+	color: #f9fafb;
+}
@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react'
+
+import { parseCodeFenceSegments } from '../../../lib/parse-code-fences'
+
+import styles from './user-message-content.module.scss'
+
+type Props = {
+	content: string
+}
+
+export function UserMessageContent({ content }: Props) {
+	const segments = useMemo(() => parseCodeFenceSegments(content), [content])
+	const hasCode = segments.some((segment) => segment.type === 'code')
+
+	if (!hasCode) {
+		return <>{content}</>
+	}
+
+	return (
+		<div className={styles.root}>
+			{segments.map((segment, index) => {
+				if (segment.type === 'text') {
+					if (!segment.content) return null
+					return (
+						<span key={`text-${index}`} className={styles.text}>
+							{segment.content.replace(/^\n+/, '').replace(/\n+$/, '')}
+						</span>
+					)
+				}
+
+				return (
+					<div key={`code-${index}`} className={styles.codeBlock}>
+						<pre className={styles.code}>{segment.content}</pre>
+					</div>
+				)
+			})}
+		</div>
+	)
+}
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React, { useMemo, useState, type Ref } from 'react'
 import { Box, Menu, MenuItem, Skeleton, Typography } from '@mui/material'
 import Stack from '@mui/material/Stack'
 import Image from 'next/image'
@@ -6,14 +6,50 @@ import Image from 'next/image'
 import { TooltipCustom } from '#/shared'
 import { c, formatDate } from '#/shared/lib/helpers'
 import { Message } from '#/shared/lib/types/model'
-import { BotMessage } from './bot-message'
+import { BotMessage } from '../bot-message/bot-message'
 
-import { Markdown } from '../../lib/markdown/markdown'
+import { Markdown } from '../../../lib/markdown/markdown'
 
-import { FullscreenIcon } from './icons/fullscreen-icon'
-import { FullscreenMessageModal } from './fullscreen-message-modal'
+import { FullscreenIcon } from '../icons/fullscreen-icon'
+import { FullscreenMessageModal } from '../fullscreen-message-modal/fullscreen-message-modal'
+import { SelectionReplyPopover, selectionReplyStyles, useSelectionReply } from '../selection-reply'
+import { UserMessageContent } from './user-message-content'
 
-import styles from './bot-message.module.scss'
+import styles from '../bot-message/bot-message.module.scss'
+
+type UserTextBubbleProps = {
+	content: string
+	contentRef: Ref<HTMLDivElement>
+	onMouseUp: () => void
+	onTouchEnd: () => void
+}
+
+function UserTextBubble({ content, contentRef, onMouseUp, onTouchEnd }: UserTextBubbleProps) {
+	return (
+		<Typography
+			ref={contentRef}
+			onMouseUp={onMouseUp}
+			onTouchEnd={onTouchEnd}
+			className={c('smallScroll', selectionReplyStyles.messageContentUser)}
+			component='div'
+			sx={{
+				overflowY: 'auto',
+				padding: '10px 15px',
+				backgroundColor: '#7F7DF3',
+				borderRadius: '13px',
+				color: '#FFFFFF',
+				lineHeight: '21px',
+				fontSize: '15px',
+				fontWeight: '400px',
+				marginTop: 0.4,
+				textAlign: 'left',
+				whiteSpace: content.length > 30 ? 'pre-wrap' : 'pre',
+			}}
+		>
+			<UserMessageContent content={content} />
+		</Typography>
+	)
+}
 
 interface IMessagesList {
 	device: 'mobile' | 'desktop'
@@ -25,6 +61,7 @@ interface IMessagesList {
 	deleteMessage?: (message_uid: string) => void
 	modelTitle: string | undefined
 	setResendValue: (value: string) => void
+	setQuoteValue?: (value: string | null) => void
 	onLoadImage?: (event: React.ChangeEvent<HTMLInputElement> | null, file?: File) => void
 	isStreaming?: boolean
 }
@@ -36,6 +73,20 @@ export const UserMessage = React.memo(function UserMessage({ setCurrentSrc, setM
 	const [loaded, setLoaded] = useState(false)
 	const [fullscreenModalOpen, setFullscreenModalOpen] = useState(false)
 
+	const {
+		contentRef,
+		onContentMouseUp,
+		onContentTouchEnd,
+		selectionVirtualAnchor,
+		placement,
+		clearSelectionTooltip,
+		handleAskSelection,
+		handleCopySelection,
+	} = useSelectionReply({
+		desktop,
+		onQuote: props.setQuoteValue,
+		enabled: Boolean(props.setQuoteValue) && !props.message.from_model,
+	})
 
 	const copy = (text: string) => {
 		navigator.clipboard.writeText(text)
@@ -339,24 +390,12 @@ export const UserMessage = React.memo(function UserMessage({ setCurrentSrc, setM
 													)}
 												</TooltipCustom>
 												{props.message.content && props.message.content.length > 0 && (
-													<Typography
-														className='smallScroll'
-														sx={{
-															overflowY: 'auto',
-															padding: '10px 15px',
-															backgroundColor: '#7F7DF3',
-															borderRadius: '13px',
-															color: '#FFFFFF',
-															lineHeight: '21px',
-															fontSize: '15px',
-															fontWeight: '400px',
-															marginTop: 0.4,
-															textAlign: 'left',
-															whiteSpace: props.message.content.length > 30 ? 'pre-wrap' : 'pre',
-														}}
-													>
-														{props.message.content}
-													</Typography>
+													<UserTextBubble
+														content={props.message.content}
+														contentRef={contentRef}
+														onMouseUp={onContentMouseUp}
+														onTouchEnd={onContentTouchEnd}
+													/>
 												)}
 											</Box>
 										</Box>
@@ -594,24 +633,12 @@ export const UserMessage = React.memo(function UserMessage({ setCurrentSrc, setM
 													)}
 												</TooltipCustom>
 												{props.message.content && props.message.content.length > 0 && (
-													<Typography
-														className='smallScroll'
-														sx={{
-															overflowY: 'auto',
-															padding: '10px 15px',
-															backgroundColor: '#7F7DF3',
-															borderRadius: '13px',
-															color: '#FFFFFF',
-															lineHeight: '21px',
-															fontSize: '15px',
-															fontWeight: '400px',
-															marginTop: 0.4,
-															textAlign: 'left',
-															whiteSpace: props.message.content.length > 30 ? 'pre-wrap' : 'pre',
-														}}
-													>
-														{props.message.content}
-													</Typography>
+													<UserTextBubble
+														content={props.message.content}
+														contentRef={contentRef}
+														onMouseUp={onContentMouseUp}
+														onTouchEnd={onContentTouchEnd}
+													/>
 												)}
 											</Box>
 										</Box>
@@ -797,28 +824,25 @@ export const UserMessage = React.memo(function UserMessage({ setCurrentSrc, setM
 											)}
 										</TooltipCustom>
 										{props.message.content && props.message.content.length > 0 && (
-											<Typography
-												className='smallScroll'
-												sx={{
-													overflowY: 'auto',
-													padding: '10px 15px',
-													backgroundColor: '#7F7DF3',
-													borderRadius: '13px',
-													color: '#FFFFFF',
-													lineHeight: '21px',
-													fontSize: '15px',
-													fontWeight: '400px',
-													marginTop: 0.4,
-													textAlign: 'left',
-													whiteSpace: props.message.content.length > 30 ? 'pre-wrap' : 'pre',
-												}}
-											>
-												{props.message.content}
-											</Typography>
+											<UserTextBubble
+												content={props.message.content}
+												contentRef={contentRef}
+												onMouseUp={onContentMouseUp}
+												onTouchEnd={onContentTouchEnd}
+											/>
 										)}
 									</Box>
 								)}
 							</Box>
+							{selectionVirtualAnchor ? (
+								<SelectionReplyPopover
+									anchor={selectionVirtualAnchor}
+									placement={placement}
+									onClose={clearSelectionTooltip}
+									onReply={handleAskSelection}
+									onCopy={handleCopySelection}
+								/>
+							) : null}
 						</Box>
 					</Box>
 				) : (
@@ -830,6 +854,8 @@ export const UserMessage = React.memo(function UserMessage({ setCurrentSrc, setM
 						desktop={desktop}
 						modelType={props.modelType}
 						isStreaming={props.isStreaming}
+						setResendValue={props.setResendValue}
+						setQuoteValue={props.setQuoteValue}
 					/>
 				)}
 			</span>
@@ -8,7 +8,7 @@ import { IModel } from '#/entities/model-entity'
 import { ImageModal } from '../../features/image-modal'
 import { ClientOnly } from '#/shared'
 import { ArrowDownScroll } from '#/shared/ui/icon-components/scroll-down-arrow'
-import { PreviewView } from './preview-view'
+import { PreviewView } from './preview-view/preview-view'
 import { IsNextDay } from './is-next-day'
 import { makeThinScrollbar } from '#/shared/lib/constants/styles'
 
@@ -23,6 +23,7 @@ interface IMessagesList {
 	modelTitle: string | undefined
 	botParams: IModel | null
 	setResendValue: (value: string) => void
+	setQuoteValue?: (value: string | null) => void
 	onLoadImage?: (event: React.ChangeEvent<HTMLInputElement> | null, file?: File) => void
 	loading: boolean
 	paginationLoading?: boolean
@@ -31,7 +32,7 @@ interface IMessagesList {
 const STREAM_STICK_BOTTOM_THRESHOLD_PX = 200
 
 export const ChatMessagesList: React.FC<IMessagesList> = memo(
-	({ messageResponse, onLoadImage, setResendValue, modelTitle, device, modelType, botParams, getMessagesPagination, deleteMessage, loading, paginationLoading = false }) => {
+	({ messageResponse, onLoadImage, setResendValue, setQuoteValue, modelTitle, device, modelType, botParams, getMessagesPagination, deleteMessage, loading, paginationLoading = false }) => {
 		const paginationScroll = React.useRef<HTMLDivElement | null>(null)
 		const [scrollBottom, setScrollBottom] = React.useState(0)
 		const prevMessagesSnapshotRef = useRef<{
@@ -304,6 +305,7 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(
 				<Box
 					className='smallScroll'
 					id='text-models-tour-5'
+					data-chat-viewport
 					sx={{
 						overflowY: 'auto',
 						overflowX: 'hidden',
@@ -379,6 +381,7 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(
 								<IsNextDay
 									onLoadImage={onLoadImage}
 									setResendValue={setResendValue}
+									setQuoteValue={setQuoteValue}
 									key={message.uid}
 									message={message}
 									setCurrentSrc={setCurrentSrc}
@@ -4,7 +4,7 @@ import { Box, Typography } from '@mui/material'
 import { Message } from '#/shared/lib/types/model'
 import { getDateFromString } from '../../lib/date-from-string'
 import { getDayMontsString } from '../../lib/day-months-string'
-import { UserMessage } from './user-message'
+import { UserMessage } from './user-message/user-message'
 
 interface IProps {
 	message: Message
@@ -18,6 +18,7 @@ interface IProps {
 	modelType: string
 	device: 'mobile' | 'desktop'
 	setResendValue: (value: string) => void
+	setQuoteValue?: (value: string | null) => void
 	onLoadImage?: (event: React.ChangeEvent<HTMLInputElement> | null, file?: File) => void
 	isStreaming?: boolean
 }
@@ -36,6 +37,7 @@ export const IsNextDay = memo(
 		modelType,
 		device,
 		setResendValue,
+		setQuoteValue,
 		isStreaming,
 	}: IProps) => {
 		if (messageResponse && message.created_at) {
@@ -65,6 +67,7 @@ export const IsNextDay = memo(
 							<UserMessage
 								onLoadImage={onLoadImage}
 								setResendValue={setResendValue}
+								setQuoteValue={setQuoteValue}
 								modelTitle={modelTitle}
 								deleteMessage={deleteMessage}
 								setCurrentSrc={setCurrentSrc}
@@ -103,6 +106,7 @@ export const IsNextDay = memo(
 							setModal={setModal}
 							onLoadImage={onLoadImage}
 							setResendValue={setResendValue}
+							setQuoteValue={setQuoteValue}
 							modelTitle={modelTitle}
 							setCurrentSrc={setCurrentSrc}
 							deleteMessage={deleteMessage}
@@ -121,6 +125,7 @@ export const IsNextDay = memo(
 			<UserMessage
 				onLoadImage={onLoadImage}
 				setResendValue={setResendValue}
+				setQuoteValue={setQuoteValue}
 				modelTitle={modelTitle}
 				deleteMessage={deleteMessage}
 				setCurrentSrc={setCurrentSrc}
@@ -73,6 +73,7 @@ function Chat<T>({
 	const desktop = device === 'desktop'
 
 	const [resendValue, setResendValue] = React.useState<string>('')
+	const [quoteValue, setQuoteValue] = React.useState<string | null>(null)
 
 	const onLoadImage = useCallback((event: React.ChangeEvent<HTMLInputElement> | null, file?: File) => {
 		if (event?.target.files) {
@@ -94,6 +95,10 @@ function Chat<T>({
 		[resendValue]
 	)
 
+	const handleSetQuoteValue = useCallback((value: string | null) => {
+		setQuoteValue(value)
+	}, [])
+
 	const clearImage = () => {
 		setFile(null)
 	}
@@ -121,6 +126,7 @@ function Chat<T>({
 					botParams={botParams}
 					onLoadImage={onLoadImage}
 					setResendValue={handleSetResetValue}
+					setQuoteValue={handleSetQuoteValue}
 					device={device}
 					getMessagesPagination={getMessagesPagination}
 					messageResponse={messages}
@@ -134,6 +140,8 @@ function Chat<T>({
 				<div id='text-models-tour-2' className={styles.tourAnchor}>
 					<ModelInput
 						resendValue={resendValue}
+						quoteValue={quoteValue}
+						onQuoteChange={handleSetQuoteValue}
 						currentVersion={currentVersion}
 						viewMobileSettings={openMobileFilters}
 						input_types={input_types}