Skip to content
This repository was archived by the owner on Jun 28, 2026. It is now read-only.

Add Chatbot on IssueHub V0.2 #26

Open
emylattuada wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add Chatbot on IssueHub V0.2 #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
96412fb
Add files via upload
emylattuada May 20, 2026
69ece39
Add files via upload
emylattuada May 20, 2026
db37920
Update layout.tsx
emylattuada May 20, 2026
ec40e9e
Update EmailJS service and template identifiers
emylattuada May 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/images/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/send.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from 'next/font/google';
import './globals.css';
import MuiProvider from '@/components/layout/MuiProvider';
import QueryProvider from '@/components/layout/QueryProvider';
import Chatbot from '@/components/Chatbot/Chatbot';

const geistSans = Geist({
variable: '--font-geist-sans',
Expand Down Expand Up @@ -31,6 +32,7 @@ export default function RootLayout({
<MuiProvider>
<QueryProvider>{children}</QueryProvider>
</MuiProvider>
<Chatbot />
</body>
</html>
);
Expand Down
266 changes: 266 additions & 0 deletions src/components/Chatbot/Chatbot.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,266 @@
/* IssueBot — matches the dark zinc theme of IssueHub */
/* Uses CSS variables from globals.css + Geist font from next/font */

.chatbot-bubble {
position: fixed;
bottom: 28px;
right: 28px;
width: 56px;
height: 56px;
background: #fafafa;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1000;
transition:
transform 0.2s ease,
background 0.2s ease;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.chatbot-bubble:hover {
transform: scale(1.08);
background: #e4e4e7;
}

.chatbot-bubble .icon-chat path {
fill: #0a0a0b;
}

.chatbot-bubble .icon-close line {
stroke: #0a0a0b;
}

.icon-chat,
.icon-close {
position: absolute;
transition:
transform 0.25s ease,
opacity 0.2s ease;
}

.icon-close {
opacity: 0;
transform: scale(0.6) rotate(-20deg);
}

.chatbot-bubble.open .icon-chat {
opacity: 0;
transform: scale(0.6) rotate(20deg);
}

.chatbot-bubble.open .icon-close {
opacity: 1;
transform: scale(1) rotate(0deg);
}

/* ── Container ────────────────────────────────────────────────────────────── */
.chatbot-container {
height: 420px;
width: 350px;
background: #18181b; /* --muted: zinc-900 */
border: 1px solid #27272a; /* --border: zinc-800 */
Comment on lines +64 to +65

@gemini-code-assist gemini-code-assist Bot May 20, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This component uses hardcoded hex color codes (e.g., #18181b, #27272a). The project defines a theme with CSS variables in globals.css (like --muted and --border) to ensure visual consistency.

To align with the project's design system and improve maintainability, please replace the hardcoded colors in this file with the corresponding CSS variables.

For example:

  • #fafafa should be var(--foreground)
  • #0a0a0b should be var(--background)
  • #18181b should be var(--muted)
  • #27272a should be var(--border)
  • #a1a1aa should be var(--muted-foreground)
Suggested change
background: #18181b; /* --muted: zinc-900 */
border: 1px solid #27272a; /* --border: zinc-800 */
background: var(--muted); /* --muted: zinc-900 */
border: 1px solid var(--border); /* --border: zinc-800 */

position: fixed;
bottom: 96px;
right: 28px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
z-index: 999;
font-family: var(--font-geist-sans, sans-serif);
color: #fafafa;

transform-origin: bottom right;
transform: scale(0.85) translateY(16px);
opacity: 0;
pointer-events: none;
transition:
transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.2s ease;
}

.chatbot-container.open {
transform: scale(1) translateY(0);
opacity: 1;
pointer-events: all;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.chatbot-header {
height: 56px;
display: flex;
align-items: center;
padding: 0 16px;
background: #0a0a0b;
border-bottom: 1px solid #27272a;
flex-shrink: 0;
gap: 10px;
}

.chatbot-logo {
width: 32px;
height: 32px;
flex-shrink: 0;
}

.chatbot-title {
font-size: 0.95rem;
font-weight: 600;
color: #fafafa;
letter-spacing: 0.01em;
}

.chatbot-minimize-btn {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
padding: 6px;
border-radius: 6px;
color: #a1a1aa;
transition:
color 0.15s ease,
background 0.15s ease;
}

.chatbot-minimize-btn:hover {
color: #fafafa;
background: #27272a;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
.chatbot-body {
flex: 1;
display: flex;
flex-direction: column;
padding: 12px 10px;
align-items: flex-end;
overflow-y: auto;
gap: 2px;
}

.chatbot-body::-webkit-scrollbar {
width: 4px;
}
.chatbot-body::-webkit-scrollbar-track {
background: transparent;
}
.chatbot-body::-webkit-scrollbar-thumb {
background: #27272a;
border-radius: 4px;
}

/* ── Messages ─────────────────────────────────────────────────────────────── */
.chatbot-bot-msg,
.chatbot-user-msg {
padding: 8px 12px;
margin: 3px 0;
max-width: 82%;
font-size: 0.875rem;
line-height: 1.45;
word-break: break-word;

@coderabbitai coderabbitai Bot May 20, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Replace deprecated word-break: break-word with modern property.

word-break: break-word is deprecated. Use overflow-wrap: break-word instead for the same behavior without the deprecation warning.

🔧 Proposed fix 
  max-width: 82%;
  font-size: 0.875rem;
  line-height: 1.45;
- word-break: break-word;
+ overflow-wrap: break-word;
}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
word-break: break-word;
max-width: 82%;
font-size: 0.875rem;
line-height: 1.45;
overflow-wrap: break-word;
}
🧰 Tools
🪛 Stylelint (17.11.1)

[error] 169-169: Deprecated keyword "break-word" for property "word-break" (declaration-property-value-keyword-no-deprecated)

(declaration-property-value-keyword-no-deprecated)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Chatbot/Chatbot.css` at line 169, In
src/components/Chatbot/Chatbot.css replace the deprecated CSS declaration
"word-break: break-word" with the modern equivalent "overflow-wrap: break-word"
in the rule that currently contains that property; locate the occurrence of the
"word-break: break-word" declaration and remove or replace it with
"overflow-wrap: break-word" so the element keeps the same wrapping behavior
without using the deprecated property.

}

.chatbot-user-msg {
background: #27272a;
color: #fafafa;
align-self: flex-end;
border-radius: 12px 3px 12px 12px;
}

.chatbot-bot-msg {
background: #3f3f46;
color: #fafafa;
align-self: flex-start;
border-radius: 3px 12px 12px 12px;
}

/* ── Welcome ──────────────────────────────────────────────────────────────── */
.chatbot-welcome {
display: flex;
flex-direction: column;
gap: 8px;
}

.chatbot-recommended-label {
font-size: 0.68rem;
font-weight: 600;
color: #a1a1aa;
text-transform: uppercase;
letter-spacing: 0.06em;
}

.chatbot-option-btn {
background: transparent;
color: #fafafa;
border: 1px solid #3f3f46;
border-radius: 20px;
padding: 5px 14px;
font-size: 0.8rem;
font-family: var(--font-geist-sans, sans-serif);
cursor: pointer;
align-self: flex-start;
transition:
background 0.2s,
border-color 0.2s;
}

.chatbot-option-btn:hover {
background: #27272a;
border-color: #a1a1aa;
}

/* ── Input row ────────────────────────────────────────────────────────────── */
.chatbot-input-row {
height: 52px;
display: flex;
align-items: center;
border-top: 1px solid #27272a;
background: #0a0a0b;
flex-shrink: 0;
padding: 0 4px 0 0;
}

.chatbot-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: #fafafa;
caret-color: #fafafa;
font-size: 0.9rem;
font-family: var(--font-geist-sans, sans-serif);
padding: 8px 12px;
}

.chatbot-input::placeholder {
color: #52525b;
}

.chatbot-send-btn {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border-radius: 8px;
opacity: 0.6;
transition:
opacity 0.15s ease,
background 0.15s ease;
}

.chatbot-send-btn:hover {
opacity: 1;
background: #27272a;
}
Loading