feat(chat): improve styling

DashHub-ai · Feb 22, 2025 · 976e542 · 976e542
1 parent 5c37ef8
commit 976e542
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 13 deletions.
diff --git a/apps/chat/src/modules/chats/conversation/messages/chat-message.tsx b/apps/chat/src/modules/chats/conversation/messages/chat-message.tsx
@@ -41,6 +41,7 @@ type Props = {
   readOnly?: boolean;
   archived?: boolean;
   showToolbars?: boolean;
+  showAvatar?: boolean;
   onRefreshResponse?: (message: Omit<SdkRepeatedMessageItemT, 'content'>) => void;
   onReply?: (message: SdkRepeatedMessageItemT) => void;
   onAction?: (action: string) => void;
@@ -55,6 +56,7 @@ export function ChatMessage(
     actionsToolbar,
     isLast,
     readOnly,
+    showAvatar = true,
     showToolbars = true,
     onRefreshResponse,
     onReply,
@@ -99,7 +101,7 @@ export function ChatMessage(
         className,
       )}
     >
-      {(!isYou || isAI) && (
+      {showAvatar && (!isYou || isAI) && (
         <div
           className={clsx(
             'flex flex-shrink-0 justify-center items-center border rounded-full w-8 h-8',

diff --git a/apps/chat/src/modules/pinned-messages/grid/pinned-message-card.tsx b/apps/chat/src/modules/pinned-messages/grid/pinned-message-card.tsx
@@ -30,6 +30,7 @@ export function PinnedMessageCard({ pinnedMessage }: Props) {
       className="mx-auto mb-0 max-w-[750px]"
       message={{ ...message, repeats: [] }}
       showToolbars={false}
+      showAvatar={false}
       showAnim={false}
       actionsToolbar={(
         <ToolbarSmallActionButton

diff --git a/apps/chat/src/modules/pinned-messages/grid/pinned-messages-container.tsx b/apps/chat/src/modules/pinned-messages/grid/pinned-messages-container.tsx
@@ -54,18 +54,23 @@ export function PinnedMessagesContainer({ storeDataInUrl = false }: Props) {
 
   return (
     <section>
-      <PaginationToolbar className="mb-6">
-        <PaginationSearchToolbarItem
-          {...pagination.bind.path('phrase', {
-            relatedInputs: ({ newGlobalValue, newControlValue }) => ({
-              ...newGlobalValue,
-              sort: newControlValue ? 'score:desc' : 'createdAt:asc',
-            }),
-          })}
-        />
+      <PaginationToolbar
+        className="mb-6"
+        suffix={(
+          <>
+            <PaginationSearchToolbarItem
+              {...pagination.bind.path('phrase', {
+                relatedInputs: ({ newGlobalValue, newControlValue }) => ({
+                  ...newGlobalValue,
+                  sort: newControlValue ? 'score:desc' : 'createdAt:asc',
+                }),
+              })}
+            />
 
-        <ResetFiltersButton onClick={reset} />
-      </PaginationToolbar>
+            <ResetFiltersButton onClick={reset} />
+          </>
+        )}
+      />
 
       <PaginatedList
         result={mappedResult}

diff --git a/apps/chat/src/modules/pinned-messages/grid/pinned-messages-timeline.tsx b/apps/chat/src/modules/pinned-messages/grid/pinned-messages-timeline.tsx
@@ -20,7 +20,14 @@ export function PinnedMessagesTimeline({ items }: TimelineProps) {
           const isEven = index % 2 === 0;
 
           return (
-            <div key={item.id} className="relative" style={{ marginTop: index === 0 ? '2rem' : '-4rem' }}>
+            <div
+              key={item.id}
+              className="relative"
+              style={{
+                marginTop: index === 0 ? '2rem' : '-4rem',
+                zIndex: items.length - index + 1,
+              }}
+            >
               <div className="top-[29px] left-1/2 z-10 absolute bg-white border-2 border-gray-300 rounded-full w-3 h-3 -translate-x-1/2" />
 
               <div className="top-[29px] left-1/2 absolute -translate-x-1/2 -translate-y-12">