Hushian/Presentation/HushianWebApp/Pages/FromUserSide/AIChat.razor

@page "/AIChat/{CompanyID:int}"
@using Common.Dtos
@inject ConversationService conversationService
@inject ILocalStorageService localStorageService
@inject AuthService authService
@inject BaseController baseController
@inject ToastService toastService
@inject IJSRuntime JS
@layout UserPanelLayout
@using Common.Dtos.Company
@using HushianWebApp.Service
@using HushianWebApp.Services
@using Microsoft.AspNetCore.Components.Web
@inject CompanyService companyService
@inject ToastService toastService
<div class="container-fluid">
	<div class="row" style="height:85vh">
		@if (isReady)
		{
			@if (isLogin)
			{
				<div class="col-md-12 d-flex flex-column" style="margin-top:10px">
					<div class="input-group">
						<p type="text" class="form-control fw-bold text-primary" style="border:none;align-self: center;" aria-describedby="basic-addon1">دستیار هوشمند @CompanyInfo.FullName</p>

						<div class="d-flex gap-2 ms-auto">

							<Button Color="ButtonColor.Secondary" Size=ButtonSize.ExtraSmall Outline="true" @onclick="Logout" Class="logout-btn">
								<Icon Name="IconName.BoxArrowRight" Class="me-1" /> خروج
							</Button>
						</div>
					</div>
					<div class="flex-fill chat-area-container" id="ai-chat">
						@if (messages is not null)
						{
							<div class="chat-container p-3">
								@foreach (var msg in messages)
								{
									<div class="d-flex mb-2 justify-content-start">
										<div class="chat-bubble chat-other">
											@msg.requestText
										</div>
									</div>

									<div class="d-flex mb-2 justify-content-end">
										<div class="chat-bubble chat-mine">
											@msg.responseText
										</div>
									</div>

								}
							</div>
						}
					</div>
					<div class="message-input-container mt-2">
						<div class="input-wrapper">
							<input type="text" @bind-value="inputText" class="message-input" placeholder="متن خود را بنویسید..." @onkeydown="HandleKeyDown" />
							<Button Color="ButtonColor.Primary" Size=ButtonSize.Small @onclick="Send" class="send-btn" title="ارسال">
								<Icon Name="IconName.Send" />
							</Button>
						</div>
					</div>
				</div>
			}
			else
			{
				<div class="d-flex justify-content-center align-items-center" style="height:100%">
					<div class="text-center">
						<Spinner Type="SpinnerType.Dots" Color="SpinnerColor.Primary" />
						<p class="mt-3 text-muted">نیاز به ورود دارید</p>
					</div>
				</div>
			}
		}
		else
		{
			<div class="d-flex justify-content-center align-items-center" style="height:100%">
				<div class="text-center">
					<Spinner Type="SpinnerType.Dots" Color="SpinnerColor.Primary" />
					<p class="mt-3 text-muted">در حال بارگذاری ...</p>
				</div>
			</div>
		}
	</div>
</div>

@code {
	ReadANDUpdate_CompanyDto? CompanyInfo = new();
	[Parameter] public int CompanyID { get; set; }
	List<aiResponseDto> messages = new();
	string inputText = string.Empty;
	bool isLogin = false;
	bool isReady = false;
	public string aikeyUser { get; set; }
	protected override async Task OnInitializedAsync()
	{
		await EnsureAuth();
		if (isLogin)
		{
			CompanyInfo = await companyService.GetCompany(CompanyID);
			if (CompanyInfo != null)
				await LoadMessages();
			else
			{
				toastService.Notify(new ToastMessage(ToastType.Danger, "شناسه شرکت صحیح نمی باشد"));

			}
		}
	}

	private async Task EnsureAuth()
	{
		aikeyUser = await localStorageService.GetItem<string>("aikeyUser");
		if (string.IsNullOrEmpty(aikeyUser))
		{
			aikeyUser = Guid.NewGuid().ToString();
			await localStorageService.SetItem("aikeyUser", aikeyUser);
		}
		isLogin = true;
		isReady = true;
	}

	private async Task LoadMessages()
	{
		messages = await conversationService.GetAiCurrentResponses(CompanyID,aikeyUser);
		StateHasChanged();
		await JS.InvokeVoidAsync("scrollToBottom", "ai-chat");
	}

	private async Task Send()
	{
		if (string.IsNullOrWhiteSpace(inputText)) return;

		var dto = new aiNewResponseDto { companyId = CompanyID, aiKeyUser = aikeyUser, requestText = inputText };
		var okmodel = await conversationService.AiNewResponse(dto);
		if (okmodel!=null)
		{
			messages.Add(okmodel);
			inputText = string.Empty;
			StateHasChanged();
			await JS.InvokeVoidAsync("scrollToBottom", "ai-chat");
		}
		else
		{
			toastService.Notify(new ToastMessage(ToastType.Danger, "ارسال ناموفق بود"));
		}
	}

	private async Task HandleKeyDown(KeyboardEventArgs e)
	{
		if (e.Key == "Enter") await Send();
	}

	private async Task Logout()
	{
		await localStorageService.RemoveItem("aiKeyUser");
		isLogin = false;
	}
}

<style>
	.chat-area-container {
		height: 400px;
		overflow-y: auto;
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
		border: 2px solid #e9ecef;
		border-radius: 20px;
		padding: 1.5rem;
		margin: 1rem 0;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
		position: relative;
		backdrop-filter: blur(10px);
	}
	.chat-bubble {
		padding: 0.75rem 1rem;
		border-radius: 18px;
		max-width: 75%;
		word-wrap: break-word;
		white-space: pre-wrap;
		font-size: 0.95rem;
		line-height: 1.4;
		position: relative;
		transition: all 0.3s ease;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
	.chat-other {
		background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
		color: #333;
		border-top-right-radius: 4px;
		border: 1px solid #e9ecef;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	}
	.chat-ai {
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		color: #495057;
		border-top-right-radius: 4px;
		border: 1px solid #dee2e6;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	}
	.message-input-container { border-radius: 0.5rem; background-color: #f8f9fa; padding: .5rem; }
	.input-wrapper { display:flex; align-items:center; gap:.75rem; }
	.message-input { flex:1; border:none; background:transparent; padding:.5rem .75rem; font-size:.95rem; color:#495057; outline:none; border-radius:20px; }
	.send-btn { border-radius:50%; width:38px; height:38px; padding:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0d6efd 0%,#0b5ed7 100%); border:none; box-shadow:0 4px 12px rgba(13,110,253,.3); color:white; }

	.logout-btn {
		border-radius: 20px;
		font-weight: 600;
		font-size: 0.875rem;
		padding: 0.375rem 0.75rem;
		transition: all 0.3s ease;
		border-width: 2px;
		box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	}

		.logout-btn:hover {
			transform: translateY(-1px);
			box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
			border-color: #6c757d;
			background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
			color: white;
		}

	/* Improved input group styling */
	.input-group {
		margin-bottom: 1rem;
		border-radius: 0.5rem;
		overflow: hidden;
	}

		.input-group p {
			margin: 0;
			font-size: 1.1rem;
			font-weight: 700;
			background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

</style>

<script>
    window.scrollToBottom = (elementId) => {
        const el = document.getElementById(elementId);
        if (el) {
            el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
        }
    };
</script>

	<style>
	.chat-bubble {
		padding: 0.5rem 0.75rem;
		border-radius: 1rem;
		max-width: 75%;
		word-wrap: break-word;
		white-space: pre-wrap;
	}

	.chat-mine {
		background: linear-gradient(to right, #005eff, #267fff);
		color: white;
		border-top-left-radius: 0;
	}

	.chat-other {
		background-color: #f1f1f1;
		color: #333;
		border-top-right-radius: 0;
	}

	.chat-ai {
		background-color: #f1f1f1;
		color: #353;
		border-top-right-radius: 0;
	}

	</style>