Ai chat

[karinakharchenko]

No description provided.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[karinakharchenko]

@lyubov-voloshko

[Copilot]

Pull request overview

Updates the Dashboard’s “AI insights” chat panel UI/UX and state handling to support an expandable panel layout, richer suggestion templates, and improved loading/cancellation behavior.

Changes:

• Added expanded/collapsed state for the AI panel in TableStateService and wired it into the AI panel component.
• Reworked AI panel welcome experience: categorized suggestion chips + completions dropdown + revised loading indicator.
• Added styling updates for panel layout/expansion and the AI insights button positioning.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
frontend/src/app/services/table-state.service.ts	Adds expanded-state observable and ensures it resets when closing the AI panel.
frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css	Adjusts AI insights button positioning within the actions row.
frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts	Adds expansion handling, suggestion categories, request cancellation, and loading-step cycling logic.
frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.spec.ts	Updates tests for new suggestion category structure and expanded-cast mock.
frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html	Reworks AI panel markup to support expansion controls and new welcome/suggestion UX.
frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css	Major styling changes for expanded layout, welcome screen, suggestions/completions, and loading indicator.
frontend/src/app/components/dashboard/dashboard.component.html	Passes additional inputs (columns, sidebar expanded state) into the AI panel component.
frontend/src/app/animations/toggle.animation.ts	Introduces a new toggle animation export (currently unused).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

aiPanelCast and aiPanelExpandedCast are subscribed to in ngOnInit() without any teardown. Since these are BehaviorSubject-backed observables that never complete, this will leak subscriptions each time the panel is opened/closed. Please tie these subscriptions to the component lifecycle (e.g., takeUntilDestroyed() / DestroyRef, or store them in a Subscription composite and unsubscribe in ngOnDestroy()).

[Copilot]

ngOnChanges() is declared but the component does not implement OnChanges (and OnChanges is not imported). The repo’s TSLint config enables use-lifecycle-interface, which expects lifecycle hooks to have their corresponding interfaces implemented. Please add OnChanges to the implements list (and import it).

[Copilot]

createThread() will submit even when message is empty (welcome form has no required and the method has no guard). This results in sending an empty prompt to the backend and adding an empty user message to the chain. Please add an early return (and ideally keep submitting false) when the trimmed message is empty.

[Copilot]

sendMessage() similarly doesn’t guard against an empty/whitespace-only message (and will start loading steps + push an empty user message). Add the same trimmed-message validation used for thread creation, and consider ignoring calls while submitting is already true to avoid overlapping requests.

[Copilot]

This <mat-form-field> has two class attributes; in HTML the latter overwrites the former, so form-field will be dropped. Merge these into a single class attribute so both classes apply.

Suggested change

	<mat-form-field class="form-field" appearance="outline" class="ai-message-form__textarea">
	<mat-form-field class="form-field ai-message-form__textarea" appearance="outline">

[Copilot]

startLoadingSteps() starts a new setInterval each time it’s called but doesn’t clear any existing interval first. If the user triggers createThread() / sendMessage() multiple times quickly, this can leave multiple intervals running and cause rapid step changes + leaks. Consider calling stopLoadingSteps() at the start of startLoadingSteps() and/or guarding against re-entrancy when submitting is already true.

[Copilot]

onDocumentClick() casts event.target to HTMLElement and unconditionally calls .closest(...). In practice event.target can be a Text node (or other non-HTMLElement), which would throw at runtime. Please guard with event.target instanceof Element (or cast to Element after checking) before calling .closest.

[Copilot]

The expand and close icon-only buttons don’t have an accessible name (no aria-label / aria-labelledby). Please add an aria-label that reflects the action (e.g., “Expand AI insights panel” / “Collapse…” and “Close AI insights panel”) so screen readers can announce them.

Suggested change

	<button mat-icon-button (click)="toggleExpand()">
	<mat-icon>{{isExpanded ? 'close_fullscreen' : 'open_in_full'}}</mat-icon>
	</button>
	<button mat-icon-button (click)="handleClose()">
	<button mat-icon-button
	(click)="toggleExpand()"
	[attr.aria-label]="isExpanded ? 'Collapse AI insights panel' : 'Expand AI insights panel'">
	<mat-icon>{{isExpanded ? 'close_fullscreen' : 'open_in_full'}}</mat-icon>
	</button>
	<button mat-icon-button
	(click)="handleClose()"
	aria-label="Close AI insights panel">

[Copilot]

toggleAnimation is introduced as a new exported animation, but there are no references to it anywhere else in the frontend codebase. If it’s not intended for immediate use, it should be removed; otherwise, please wire it into the component(s) that need it to avoid carrying dead code (and to prevent unused-export tooling from flagging it).

Suggested change

	import {
	trigger,
	transition,
	style,
	animate,
	query,
	group,
	} from '@angular/animations';
	const easing = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
	const duration = '600ms';
	export const toggleAnimation = trigger('toggle', [
	transition(':enter', [
	style({ height: 0, opacity: 0 }),
	query('.details', [
	style({ transform: 'translateY(-100%)' })
	], { optional: true }),
	group([
	animate(`${duration} ${easing}`, style({ height: '*', opacity: 1 })),
	query('.details', [
	animate(`${duration} ${easing}`, style({ transform: 'translateY(0)' }))
	], { optional: true })
	])
	]),
	transition(':leave', [
	style({ height: '*', opacity: 1 }),
	query('.details', [
	style({ transform: 'translateY(0)' })
	], { optional: true }),
	group([
	animate(`${duration} ${easing}`, style({ height: 0, opacity: 0 })),
	query('.details', [
	animate(`${duration} ${easing}`, style({ transform: 'translateY(-100%)' }))
	], { optional: true })
	])
	])
	]);
	export {};

[Copilot]

New behaviors were added (request cancellation + loading-steps timer management), but the spec file doesn’t cover them. Adding unit tests for cancelRequest() (unsubscribes, sets submitting false, stops the interval) and startLoadingSteps()/stopLoadingSteps() (interval is created and cleared) would help prevent regressions.