feat: UI updates and automation enhancements

[Israeltheminer]

Summary

This PR includes various UI improvements and automation feature enhancements.

Changes

Automations

• Enhance automation assistant with null safety checks
• Add useAutomationVersionNavigation hook for version navigation
• Update automation sidepanel and steps components
• Add loading skeleton improvements for tables
• Update automation routes and navigation logic

UI Components

• Refactor data-table-filters with improved filtering logic
• Update data-table-skeleton styling
• Fix tab-navigation styling

Backend (Convex)

• Update workflow actions with improved error handling
• Add generate_response improvements
• Fix thread messages streaming logic

Chat

• Improve message processing hook

Settings

• Update member-table component
• Improve organization-settings-client logic

Other

• Update English translations
• Update CLAUDE.md documentation

Summary by CodeRabbit

• New Features

  • Added chat clearing functionality with clear button in mobile automation panel.
  • Introduced collapsible message view with truncation and expand/collapse buttons.
  • Added optimistic pending message display before backend confirmation.
  • Enhanced loading and empty states for workflows.

• UI/UX Improvements

  • Improved responsive filter and date range controls in data tables.
  • Adjusted chat input layout and heights.
  • Fixed sidebar flickering on data load.
  • Enhanced version navigation workflow.

• Localization

  • Added translation keys for loading states and message expansion labels.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR enhances the automation assistant's chat experience with collapsible message rendering, optimistic pending message states, and clear-chat functionality propagated to the parent component. It refactors automation version navigation using a dedicated hook to preserve sub-page context during version switches. Data table and skeleton components are extended with filter and date-range display options. Member type fields are restructured to use createdAt and userId as required properties. Convex backend changes add message persistence and promptMessageId tracking in workflow generation. Automation UI layout refinements include conditional header visibility and adjusted styling. New localization keys support loading states and message interaction labels.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• tale-project/poc2#382: Modifies automation-assistant.tsx message handling and rendering with similar scope changes to message display logic
• tale-project/poc2#416: Introduces optimistic chat/message UI patterns matching the pendingUserMessage state implementation in this PR
• feat(platform): add human input tool and structured context window #258: Updates Convex workflow agent generation pathway with promptMessageId tracking, paralleling changes to generate_response.ts and actions.ts

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 8

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

services/platform/app/features/automations/components/automation-steps.tsx (1)

1136-1151: Consider aligning banner styling with the active automation banner.

The draft banner uses px-8 and max-w-xl, while the active automation banner (lines 1156-1157) uses px-4 and max-w-3xl. This creates visual inconsistency between the two top-positioned banners.

If intentional (draft banner should be narrower), this is fine. Otherwise, consider unifying the styling for a consistent look.

🔧 Suggested fix for consistency

-              <Panel position="top-center" className="mt-4 mx-4 w-full px-8">
-                <div className="flex items-center gap-2.5 rounded-lg ring-1 ring-blue-200 bg-blue-50 px-4 py-3 shadow-sm max-w-xl mx-auto">
+              <Panel position="top-center" className="mt-4 mx-4 w-full px-4">
+                <div className="flex items-center gap-2.5 rounded-lg ring-1 ring-blue-200 bg-blue-50 px-4 py-3 shadow-sm max-w-3xl mx-auto">

services/platform/app/features/chat/hooks/use-message-processing.ts (1)

97-111: Potential type mismatch: url may be undefined but FilePart.url is required.

The intermediate cast type declares url?: string (optional), but the FilePart interface requires url: string (non-optional). The type guard p.type === 'file' doesn't guarantee url exists. If a file part arrives without a url, this will produce an invalid FilePart object at runtime.

🔧 Suggested fix: Add url check to the filter

         .filter((p): p is FilePart => p.type === 'file')
+        .filter((p): p is FilePart => p.type === 'file' && typeof p.url === 'string')

Or update the intermediate type guard:

-        .filter((p): p is FilePart => p.type === 'file')
+        .filter((p): p is FilePart => p.type === 'file' && !!p.url)

🤖 Fix all issues with AI agents

In `@services/platform/app/components/ui/data-table/data-table-filters.tsx`:
- Around line 158-163: The hard-coded placeholder "Search..." should be replaced
with the i18n fallback key; update the component (data-table-filters / the Input
where search.placeholder is used) to use the translation hook (e.g., t) and
change the fallback to search.placeholder ?? t('common.search.placeholder');
ensure the file imports and calls the same translation hook used elsewhere in
the app (e.g., useTranslation from your i18n library) so the placeholder is
localized.
- Around line 221-240: The label wrapping the custom Checkbox (in the
data-table-filters component) may not correctly associate with the input; update
the rendering to generate a unique id per option (e.g., based on option.value)
and pass that id into the Checkbox component and set the label's htmlFor (or set
aria-labelledby on Checkbox) so clicks and screen readers reliably target the
input; keep the existing checked and onCheckedChange handler
(handleFilterChange, filter.selectedValues, option.value) unchanged—only add the
id/htmlFor (or aria attributes) wiring.

In
`@services/platform/app/features/automations/components/automation-assistant.tsx`:
- Around line 696-704: The effect currently calls onClearChatStateChange every
time displayMessages.length, threadId, or handleClearChat changes which can
bounce when handleClearChat is recreated; to fix, add a ref (e.g.,
prevCanClearRef) to store the previous canClear value inside the useEffect and
only invoke onClearChatStateChange?.(canClear, handleClearChat) when canClear
!== prevCanClearRef.current (then update the ref), or alternatively stabilize
handleClearChat with useCallback; reference useEffect, displayMessages.length,
threadId, handleClearChat, and onClearChatStateChange when applying the change.
- Around line 337-372: The pending message deduplication relies on exact content
equality in displayMessages and can fail if the server normalizes or mutates
content; update the optimistic flow to attach a stable client-side correlation
id or timestamp to the pending user message (e.g., clientMessageId or
clientCreatedAt on pendingUserMessage) when creating it, and then change the
deduplication check in displayMessages and the clearing logic in the useEffect
that reads transformedMessages to compare that correlation id/timestamp (or
server-provided id if returned) instead of raw content; update any code paths
that create/set pendingUserMessage and the transformedMessages matching logic to
propagate and compare this id/timestamp (references: pendingUserMessage,
setPendingUserMessage, displayMessages, transformedMessages, the useEffect
clearing pendingUserMessage).
- Around line 343-354: The useEffect in automation-assistant.tsx reads and
writes pendingUserMessage which risks causing an update loop; change the
dependency array to depend only on messagesKey (and any stable refs needed for
transformedMessages) so the effect only runs when new messages arrive: keep the
effect body using transformedMessages, setMessages, and the pendingUserMessage
guard but remove pendingUserMessage from the dependencies, update or retain the
eslint-disable comment on react-hooks/exhaustive-deps to reflect the intentional
dependency choice, and ensure setPendingUserMessage(null) remains inside the
conditional that checks transformedMessages.some(m => m.role === 'user').

In
`@services/platform/app/features/automations/components/automation-sidepanel.tsx`:
- Around line 217-238: The clear-chat button uses a generic aria-label via
tCommon('actions.delete'); update it to a chat-specific localization key and
handler by replacing tCommon('actions.delete') with t('sidePanel.clearChat') for
the Button that renders the Trash2 icon and calls handleClearChat, and add the
corresponding clearChat entry to the automations localization namespace so
screen readers get a descriptive label.

In
`@services/platform/app/features/automations/hooks/use-automation-version-navigation.ts`:
- Around line 14-30: The sub-page detection in navigateToVersion incorrectly
matches only exact slices and can lose context for nested routes or when IDs are
prefixes; update the logic in navigateToVersion to detect sub-page segments by
enforcing path-segment boundaries and using startsWith checks (e.g., treat
'/executions' and any path beginning with '/executions/' as the executions page,
and same for '/configuration'), so the navigate calls keep the correct params
(organizationId, amId/versionId) when the current route is a nested sub-route.

In `@services/platform/convex/agents/workflow/actions.ts`:
- Around line 75-83: The saved user message currently ignores the attachments
parameter; update the save flow around saveMessage so that attachments are
converted to Convex file parts via getFile(attachment) and appended to
message.content as an array of parts (e.g., text part plus file parts) instead
of a plain string, and also record their IDs under metadata.fileIds;
specifically modify the code that calls saveMessage (using ctx,
components.agent, threadId) to build message: { role: 'user', content: [...] }
where file parts come from getFile, and set metadata.fileIds to the list of
returned file IDs before calling saveMessage so the saved message includes both
content parts and file metadata.