<%@ Page Title="Chat File Sharing" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Chat File Sharing - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Chat File Sharing</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<style>
    .chat-window {
        border: 1px solid #e2e8f0; border-radius: 10px; height: 260px;
        overflow-y: auto; padding: 12px; background: #f8fafc; margin-bottom: 10px;
    }
    .chat-bubble {
        background: #dbeafe; padding: 8px 14px; border-radius: 16px;
        margin-bottom: 8px; max-width: 70%; font-size: 0.85rem;
        margin-left: auto; word-break: break-all;
    }
    .chat-input-bar { display: flex; gap: 8px; align-items: center; }
</style>

<div class="demo-card">
    <div class="demo-card-header">Chat File Sharing</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Share files in a chat-style interface. Uploaded files appear as message bubbles
            in the conversation timeline alongside text messages.
        </p>

        <div class="chat-window" id="chatWindow">
            <div class="chat-bubble" style="margin-left:0; background:#e2e8f0;">Hi! Send me the files.</div>
        </div>
        <div class="chat-input-bar">
            <asp:TextBox ID="txtChatInput" runat="server" CssClass="form-control form-control-sm"
                placeholder="Type a message..." ClientIDMode="Static" />
            <div id="chatUploader"></div>
        </div>

        <div class="code-panel">
            <pre><code>AjaxUploader.create(el, {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    autoUpload: true,
    onComplete: function (file) {
        addChatBubble('File: ' + file.name);
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    function sendMsg() {
        var input = document.getElementById('txtChatInput');
        if (!input.value.trim()) return;
        addBubble(input.value);
        input.value = '';
    }
    function addBubble(text) {
        var b = document.createElement('div');
        b.className = 'chat-bubble';
        b.textContent = text;
        var w = document.getElementById('chatWindow');
        w.appendChild(b);
        w.scrollTop = w.scrollHeight;
    }
    document.getElementById('txtChatInput').addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); sendMsg(); }
    });
    AjaxUploader.create(document.getElementById('chatUploader'), {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
        multiple: false,
        autoUpload: true,
        onComplete: function (file) {
            addBubble('Attachment: ' + file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)');
        }
    });
</script>
</asp:Content>
