refactor: standardize input and UI icons with lucide-react

[Yugansh5013]

Description

This PR addresses UI/UX inconsistencies in the chatbot's Input component, specifically focusing on dark mode compatibility and visual alignment with the rest of the plugin.

Previously, the input area and file attachment chips relied on hardcoded emojis (📎, 🖼️, 📄) and hardcoded hex colors (#fff, #ccc, #f8f9fa). These hardcoded values did not respect Jenkins' built-in theming, causing the input area to be glaringly bright and illegible in dark mode.

Key Changes:

• Replaced all hardcoded emojis in the input field and attachment previews with standard lucide-react icons (Paperclip, Image, File, Send, and CircleStop for the cancel action).
• Refactored chatbotStyles to replace static hex colors with standard Jenkins CSS variables (e.g., var(--button-background), var(--text-color), var(--panel-background)).
• Added flexbox properties to cleanly center the new icons within their respective buttons and attachment chips.

UI Changes (Screenshots)

Before (Hardcoded Emojis & Colors)
Light mode:

Dark mode:

After (Lucide Icons & CSS Variables)
Light mode:

Dark mode:

Testing done

• Manual UI Testing: Built the frontend and deployed the plugin locally. Toggled the Jenkins instance between Light, Dark, and System themes to verify that the Input background, text colors, and newly added Lucide icons dynamically update to match the active theme.
• Component Verification: Attached both image and text files to the chat input to ensure the conditional rendering of the Image and File lucide icons works correctly in the attachment chips. Verified that the Send and CircleStop icons render correctly based on the message loading state.

Submitter checklist

• Make sure you are opening from a topic/feature/bugfix branch (right side) and not your main branch!
• Ensure that the pull request title represents the desired changelog entry
• Please describe what you did
• Link to relevant issues in GitHub or Jira Fixes UI/UX: Standardize input component icons for dark mode compatibility #266
• Link to relevant pull requests, esp. upstream and downstream changes
• Ensure you have provided tests that demonstrate the feature works or the issue is fixed

[divyansh-cyber]

just want to mention my findings
Enter key still sends while loading / when input is empty (frontend/src/components/Input.tsx)
handleKeyDown is calling onSend() on Enter without checking isLoading / canSend, so it can send empty or duplicate messages.
Probably better to just guard it with if (isLoading || !canSend) return;
a additional suggestion
File icon placement (frontend/src/components/Input.tsx)
The icon is inside an ellipsis-clipped filename span, so it can get clipped with long names.
Might be better to render it as a sibling element outside the clipped text.
and what i want to ask at last
Is the scope limited to the Input component only?