Skip to content

Commit 698d862

Browse files
velt-sdkvelt-sdk
committed
Integrate VeltInlineCommentsSection into ActionModal for enhanced comment functionality
- Replaced the existing textarea for comments with VeltInlineCommentsSection to streamline the comment submission process. - Added new CSS styles for action comments section to improve layout and user experience. - Updated VeltCustomization to include the new VeltInlineCommentsSectionActionCommentsWf component for better modularity.
1 parent 7e064c9 commit 698d862

File tree

4 files changed

+142
-39
lines changed

4 files changed

+142
-39
lines changed

‎apps/react/comments/dashboard/self-hosting/dashboard-postgres-demo/components/document/ActionModal.tsx‎

Lines changed: 2 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use client'
22

3+
import { VeltInlineCommentsSection } from '@veltdev/react'
34
import { useState } from 'react'
45

56
interface ActionModalProps {
@@ -173,46 +174,8 @@ export default function ActionModal({ jobId, actionType, actionLabel, onClose, o
173174
<label className="block text-sm font-medium text-gray-700 mb-2">
174175
Comment {config.required && <span className="text-red-500">*</span>}
175176
</label>
176-
<div className="relative">
177-
<textarea
178-
value={comment}
179-
onChange={(e) => setComment(e.target.value)}
180-
placeholder={`Add your ${actionType} comment here...`}
181-
rows={4}
182-
className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none ${
183-
config.required && !comment.trim() ? 'border-gray-300' : 'border-gray-300'
184-
}`}
185-
/>
186-
</div>
187-
{config.required && !comment.trim() && (
188-
<p className="mt-1 text-xs text-gray-500">A comment is required for this action.</p>
189-
)}
177+
<VeltInlineCommentsSection variant="action-comment-section" context={{ jobId: jobId, commentType: 'action' }} targetElementId={actionTargetId} shadowDom={false} composerPosition="bottom" />
190178
</div>
191-
192-
{/* Info about action comments */}
193-
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
194-
<p className="text-xs text-amber-800">
195-
<strong>Note:</strong> Action comments are recorded for audit purposes and cannot be deleted.
196-
They will appear in the job&apos;s comment history.
197-
</p>
198-
</div>
199-
</div>
200-
201-
{/* Footer */}
202-
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-xl">
203-
<button
204-
onClick={onClose}
205-
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
206-
>
207-
Cancel
208-
</button>
209-
<button
210-
onClick={handleSubmit}
211-
disabled={isSubmitting || (config.required && !comment.trim())}
212-
className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${config.buttonClass}`}
213-
>
214-
{isSubmitting ? 'Submitting...' : config.buttonText}
215-
</button>
216179
</div>
217180
</div>
218181
</div>

‎apps/react/comments/dashboard/self-hosting/dashboard-postgres-demo/components/velt/ui-customization/VeltCustomization.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import VeltCommentsSidebarFocusedThreadWf from './VeltCommentsSidebarFocusedThre
1212
import VeltCommentsSidebarEmptyPlaceholderWf from './VeltCommentsSidebarEmptyPlaceholderWf';
1313
import VeltNotificationWf from './VeltNotificationPanelWf';
1414
import VeltNotificationListItemWf from './VeltNotificationListItemWf';
15+
import VeltInlineCommentsSectionActionCommentsWf from './VeltInlineCommentsSectionActionCommentsWf';
1516

1617
export function VeltCustomization() {
1718

@@ -25,6 +26,7 @@ export function VeltCustomization() {
2526
<VeltCommentDialogWf />
2627
<VeltReactionToolWf />
2728
<VeltInlineCommentsSectionWf />
29+
<VeltInlineCommentsSectionActionCommentsWf />
2830
<VeltCommentsSidebarFocusedThreadWf />
2931
<VeltCommentsSidebarEmptyPlaceholderWf />
3032
<VeltNotificationWf />

‎apps/react/comments/dashboard/self-hosting/dashboard-postgres-demo/components/velt/ui-customization/VeltInlineCommentsSectionActionCommentsWf.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { VeltCommentDialogWireframe, VeltInlineCommentsSectionWireframe } from "@veltdev/react";
2+
3+
const VeltInlineCommentsSectionActionCommentsWf = () => {
4+
return (
5+
<VeltInlineCommentsSectionWireframe variant="action-comment-section">
6+
<VeltInlineCommentsSectionWireframe.Panel>
7+
<VeltInlineCommentsSectionWireframe.ComposerContainer>
8+
<VeltCommentDialogWireframe.Composer veltClass="'oe-disabled': {annotation.context.commentType} === 'action'">
9+
<div className="oe-action-composer">
10+
{/* Textarea Input */}
11+
<div className="oe-action-composer-input-wrapper">
12+
<VeltCommentDialogWireframe.Composer.Input placeholder="Add your approve comment here..." />
13+
</div>
14+
15+
{/* Info about action comments */}
16+
<div className="oe-action-composer-note">
17+
<p className="oe-action-composer-note-text">
18+
<strong>Note:</strong> Action comments are recorded for audit purposes and cannot be deleted.
19+
They will appear in the job&apos;s comment history.
20+
</p>
21+
</div>
22+
23+
{/* Approve Button */}
24+
<div className="oe-action-composer-buttons">
25+
<VeltCommentDialogWireframe.Composer.ActionButton type="submit">
26+
<button type="button" className="oe-action-btn-approve">
27+
Approve
28+
</button>
29+
</VeltCommentDialogWireframe.Composer.ActionButton>
30+
</div>
31+
</div>
32+
</VeltCommentDialogWireframe.Composer>
33+
</VeltInlineCommentsSectionWireframe.ComposerContainer>
34+
</VeltInlineCommentsSectionWireframe.Panel>
35+
</VeltInlineCommentsSectionWireframe>
36+
)
37+
}
38+
39+
export default VeltInlineCommentsSectionActionCommentsWf;

‎apps/react/comments/dashboard/self-hosting/dashboard-postgres-demo/components/velt/ui-customization/styles.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1355,4 +1355,103 @@ app-if {
13551355

13561356
app-notifications-panel-view-all-button {
13571357
display: none !important;
1358+
}
1359+
1360+
body {
1361+
--velt-spacing-2xs: 4px;
1362+
--velt-spacing-xs: 8px;
1363+
--velt-spacing-sm: 12px;
1364+
--velt-spacing-md: 16px;
1365+
--velt-spacing-lg: 24px;
1366+
--velt-spacing-xl: 32px;
1367+
--velt-spacing-2xl: 64px;
1368+
--velt-spacing-3xl: 80px;
1369+
}
1370+
1371+
/* ========================================
1372+
Action Comments Section Styling
1373+
======================================== */
1374+
1375+
.oe-action-composer {
1376+
display: flex;
1377+
flex-direction: column;
1378+
gap: 16px;
1379+
}
1380+
1381+
.oe-action-composer-input-wrapper {
1382+
border: 1px solid #d1d5db;
1383+
border-radius: 8px;
1384+
min-height: 100px;
1385+
padding: 12px;
1386+
background-color: #ffffff;
1387+
}
1388+
1389+
.oe-action-composer-input-wrapper .velt-composer-input--message {
1390+
padding: 0 !important;
1391+
min-height: 76px !important;
1392+
font-weight: 400 !important;
1393+
font-size: 14px !important;
1394+
line-height: 21px !important;
1395+
color: #0e0e0e !important;
1396+
}
1397+
1398+
.oe-action-composer-input-wrapper .velt-composer-input--message::placeholder {
1399+
color: #9ca3af !important;
1400+
}
1401+
1402+
.oe-action-composer-input-wrapper:focus-within {
1403+
border-color: #3b82f6;
1404+
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
1405+
}
1406+
1407+
.oe-action-composer-note {
1408+
background-color: #fefce8;
1409+
border: 1px solid #fcd34d;
1410+
border-radius: 8px;
1411+
padding: 12px;
1412+
}
1413+
1414+
.oe-action-composer-note-text {
1415+
font-size: 12px;
1416+
line-height: 18px;
1417+
color: #92400e;
1418+
margin: 0;
1419+
}
1420+
1421+
.oe-action-composer-note-text strong {
1422+
color: #b45309;
1423+
}
1424+
1425+
.oe-action-composer-buttons {
1426+
display: flex;
1427+
flex-direction: row;
1428+
align-items: center;
1429+
justify-content: center;
1430+
padding-top: 8px;
1431+
}
1432+
1433+
.oe-action-btn-approve {
1434+
padding: 8px 16px;
1435+
font-weight: 500;
1436+
font-size: 14px;
1437+
line-height: 21px;
1438+
color: #ffffff;
1439+
background-color: #22c55e;
1440+
border: none;
1441+
border-radius: 6px;
1442+
cursor: pointer;
1443+
transition: all 0.15s ease;
1444+
}
1445+
1446+
.oe-action-btn-approve:hover {
1447+
background-color: #16a34a;
1448+
}
1449+
1450+
.oe-action-btn-approve:disabled {
1451+
background-color: #86efac;
1452+
cursor: not-allowed;
1453+
}
1454+
1455+
.velt-composer-input-focused {
1456+
13581457
}

0 commit comments

Comments
 (0)