New to Kendo UI for jQuery? Download free 30-day trial

jQuery Chat Autoscroll Threshold

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
meridian
Meridian Theme

Main

Main Dark
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main

Main Dark
Launch Theme Builder

autoscroll-threshold.html

Also available for:

API REFERENCE

AutoScrollThreshold

AI Financial Assistant

What’s on your mind today?

$(document).ready(function() { const SUGGESTIONS = [ "Quarterly financial analysis", "Annual budget breakdown", "Market trends and predictions" ]; const STATE = { thresholdValue: "50", thresholdUnit: "%", chat: null, hasMessages: false, suggestionsObserver: null }; const THRESHOLD_OPTIONS = ["0", "50", "100", "200", "300"]; const THRESHOLD_UNITS = ["%", "px"]; const suggestionsMediaQuery = window.matchMedia("(max-width: 600px)"); const LONG_RESPONSE = "Based on our comprehensive quarterly financial analysis for Q1 2026, I can provide detailed insights across revenue, margin, cash flow, and customer growth.Revenue PerformanceOur total revenue reached $45.8 million, representing year-over-year growth of 23.4%. Enterprise grew 31%, while SMB grew 18%.Regional SplitNorth America contributed 52% ($23.8M), EMEA contributed 28% ($12.8M), and APAC contributed 20% ($9.2M).Margin and Cost StructureOperating expenses totaled $32.1 million with gross margin improving to 70%, up from 67% a year earlier.Cash and GuidanceOperating cash flow was $11.4 million, free cash flow was $7.6 million, and full-year revenue guidance was raised to $195-$205 million."; const ASSISTANT_RESPONSE = LONG_RESPONSE + LONG_RESPONSE + LONG_RESPONSE; const RESPONSE_BY_SUGGESTION = { "Annual budget breakdown": "The annual operating budget is $185 million across all departments.CommercialSales and marketing combined allocation is $42.5 million, focused on pipeline growth and customer retention.Engineering and ProductEngineering, product, and infrastructure allocation is $38.7 million, including platform scale and reliability investments.Operations and Shared ServicesOperations, finance, legal, and HR combine for $59.3 million to support delivery, governance, and hiring.Reserves and ProgramsContingency and strategic initiatives account for $14.5 million for unplanned opportunities." + LONG_RESPONSE, "Market trends and predictions": "Financial software demand remains strong with continued emphasis on automation and analytics.Demand SignalsCustomers prioritize real-time reporting, lower operational overhead, and tighter integration across finance workflows.Near-Term OutlookWe expect sustained expansion in AI-assisted planning, anomaly detection, and embedded finance experiences.Execution FocusRoadmap focus remains on scalability, reliability, and measurable productivity gains for finance teams." + LONG_RESPONSE, "Quarterly financial analysis": LONG_RESPONSE + LONG_RESPONSE }; initializeSuggestions(); initializeConfigurator(); initializeChat(); attachSuggestionHandlers(); syncViewState(); if (suggestionsMediaQuery.addEventListener) { suggestionsMediaQuery.addEventListener("change", initializeSuggestions); } else if (suggestionsMediaQuery.addListener) { suggestionsMediaQuery.addListener(initializeSuggestions); } function initializeSuggestions() { const suggestions = getOrCreateSuggestionsContainer(); const existingToolbar = suggestions.data("kendoToolBar"); if (existingToolbar) { existingToolbar.destroy(); } suggestions.empty().removeClass("chat-suggestions-static"); if (!suggestionsMediaQuery.matches) { suggestions.addClass("chat-suggestions-static").append(SUGGESTIONS.map(function(text) { return '<button class="chat-suggestion" type="button" data-value="' + text + '">' + text + '</button>'; }).join("")); return; } suggestions.kendoToolBar({ size: "small", overflow: { mode: "scroll", scrollButtons: "auto", scrollButtonsPosition: "end", scrollDistance: 120 }, items: SUGGESTIONS.map(function(text) { return { type: "button", text: text, attributes: { "class": "chat-suggestion", "data-value": text } }; }) }); } function getOrCreateSuggestionsContainer() { let suggestions = $("#chat-suggestions"); if (!suggestions.length) { suggestions = $("<div>", { id: "chat-suggestions", "class": "chat-adornments-suggestions" }); $(".chat-threshold-demo .chat-adornments-frame").append(suggestions); } return suggestions; } function initializeConfigurator() { const autoComplete = $("#autoscroll-threshold-autocomplete").kendoAutoComplete({ dataSource: THRESHOLD_OPTIONS, value: STATE.thresholdValue, suggest: true, filter: "contains", clearButton: false, change: function(e) { const normalized = normalizeThresholdValue(e.sender.value()); STATE.thresholdValue = normalized; e.sender.value(normalized); applyThreshold(); } }).data("kendoAutoComplete"); $("#autoscroll-threshold-segmented").kendoButtonGroup({ selection: "single", items: THRESHOLD_UNITS.map(function(value) { return { text: value, attributes: { "data-unit": value } }; }), select: function(e) { const unit = THRESHOLD_UNITS[e.indices[0]]; if (!unit) { return; } STATE.thresholdUnit = unit; autoComplete.value(STATE.thresholdValue); applyThreshold(); } }); syncSegmentedSelection(STATE.thresholdUnit); } function normalizeThresholdValue(value) { const digits = String(value || "").replace(/[^\d]/g, ""); const numeric = Math.max(0, Number(digits || 0)); return String(numeric); } function syncSegmentedSelection(value) { const segmented = $("#autoscroll-threshold-segmented").data("kendoButtonGroup"); if (!segmented) { return; } segmented.select(-1); const index = THRESHOLD_UNITS.indexOf(value); if (index >= 0) { segmented.select(index); } } function attachSuggestionHandlers() { $(document) .off("click.chatThresholdSuggestions") .on("click.chatThresholdSuggestions", "#chat-suggestions .chat-suggestion", function() { const button = $(this); const value = button.data("value") || $.trim(button.text()); if (value) { setPromptValue(value); } }); } function mountSuggestionsNearInput() { const suggestions = getOrCreateSuggestionsContainer(); const messageBoxWrapper = $("#chat .k-message-box-wrapper"); const promptBox = messageBoxWrapper.find(".k-input.k-prompt-box").first(); if (messageBoxWrapper.length && promptBox.length && !messageBoxWrapper.has(suggestions).length) { suggestions.insertBefore(promptBox); } } function ensureSuggestionsVisible() { initializeSuggestions(); mountSuggestionsNearInput(); } function stabilizeSuggestionsMount() { ensureSuggestionsVisible(); window.setTimeout(ensureSuggestionsVisible, 0); window.setTimeout(ensureSuggestionsVisible, 40); window.setTimeout(ensureSuggestionsVisible, 120); } function setupSuggestionsObserver() { if (STATE.suggestionsObserver) { STATE.suggestionsObserver.disconnect(); } const chatHost = $("#chat")[0]; if (!chatHost || typeof MutationObserver === "undefined") { return; } STATE.suggestionsObserver = new MutationObserver(function() { mountSuggestionsNearInput(); }); STATE.suggestionsObserver.observe(chatHost, { childList: true, subtree: true }); } function setPromptValue(value) { const input = $("#chat").find(".k-prompt-box-textarea, .k-prompt-box-input").first(); if (input.length) { input.val(value).trigger("input"); } } function initializeChat() { $("#chat").kendoChat({ authorId: "user", autoScrollThreshold: getThresholdValue(), messageWidthMode: "full", skipSanitization: true, messages: { placeholder: "Type a message" }, sendMessage: function(e) { const messageText = (e.message.text || "").trim(); if (!messageText) { e.preventDefault(); return; } const response = RESPONSE_BY_SUGGESTION[messageText] || ASSISTANT_RESPONSE; window.setTimeout(function() { e.sender.postMessage({ authorId: "assistant", authorName: "AI Financial Assistant", text: response }); }, 350); if (!STATE.hasMessages) { STATE.hasMessages = true; } syncViewState(); } }); STATE.chat = $("#chat").data("kendoChat"); STATE.chat.dataSource.bind("change", function() { STATE.hasMessages = STATE.chat.dataSource.data().length > 0; syncViewState(); }); setupSuggestionsObserver(); stabilizeSuggestionsMount(); STATE.hasMessages = STATE.chat.dataSource.data().length > 0; syncViewState(); } function applyThreshold() { if (!STATE.chat) { return; } STATE.chat.setOptions({ autoScrollThreshold: getThresholdValue() }); ensureSuggestionsVisible(); window.setTimeout(ensureSuggestionsVisible, 0); window.setTimeout(ensureSuggestionsVisible, 60); syncViewState(); } function getThresholdValue() { return STATE.thresholdValue + STATE.thresholdUnit; } function syncViewState() { $("#chat-empty-state").toggleClass("chat-state-hidden", STATE.hasMessages); $("#chat").toggleClass("chat-has-messages", STATE.hasMessages); } });

Description

The Kendo UI for jQuery Chat supports configurable autoscroll behavior for incoming messages.

This demo shows how the autoScrollThreshold option keeps new responses in view only while the user stays inside the configured bottom zone.

This Chat example is part of a unique collection of hundreds of jQuery demos, with which you can see all Kendo UI for jQuery components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Kendo UI for jQuery Dojo or ThemeBuilder.

jQuery Chat Autoscroll Threshold

Description

Support & Learning Resources

Additional Resources