...

Presentation/HushianWebApp/Pages/FromUserSide/UserCP.razor

@@ -155,8 +155,11 @@
                         <div class="message-input-container" id="B2">
                             <div class="input-wrapper">
                                 <input type="text" @bind-value="MsgInput" class="message-input" placeholder="پیام خود را بنویسید..." @onkeydown="HandleKeyDown" />
-                                <InputFile OnChange="OnImageSelected" accept="image/*" />
+                                <InputFile id="chatImageInput" style="display:none" OnChange="OnImageSelected" accept="image/*" />
-                                <Button Color="ButtonColor.Primary" Size=ButtonSize.Small @onclick="OnClickSendMsg" Class="send-btn">
+                                <Button Color="ButtonColor.Secondary" Size=ButtonSize.Small Outline="true" @onclick="OpenFileDialog" Class="attach-btn" title="افزودن تصویر">
+                                    <Icon Name="IconName.Image" />
+                                </Button>
+                                <Button Color="ButtonColor.Primary" Size=ButtonSize.Small @onclick="OnClickSendMsg" Class="send-btn" title="ارسال">
                                     <Icon Name="IconName.Send" />
                                 </Button>
                             </div>
@@ -484,6 +487,10 @@
 
 }
 @functions {
+    private async Task OpenFileDialog()
+    {
+        await JS.InvokeVoidAsync("triggerClick", "chatImageInput");
+    }
     private async Task OnImageSelected(InputFileChangeEventArgs e)
     {
         var file = e.File;
@@ -890,6 +897,32 @@
             transform: scale(1.1);
         }
 
+    .attach-btn {
+        border-radius: 50%;
+        width: 38px;
+        height: 38px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+        border: 1px solid #e9ecef;
+        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
+        transition: all 0.3s ease;
+        color: #495057;
+    }
+
+        .attach-btn:hover {
+            transform: translateY(-2px) scale(1.05);
+            box-shadow: 0 6px 16px rgba(108, 117, 125, 0.3);
+            background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
+        }
+
+        .attach-btn:active {
+            transform: translateY(0) scale(0.95);
+            box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2);
+        }
+
     /* Beautiful chat separator styling */
     .chat-separator {
         text-align: center;
@@ -1245,4 +1278,12 @@
         }
     };
 
+    // Trigger click on hidden input by id
+    window.triggerClick = (elementId) => {
+        const el = document.getElementById(elementId);
+        if (el) {
+            el.click();
+        }
+    };
+
 </script>