✨ feat: Implement Conversation Duplication & UI Improvements (#5036)

* feat(ui): enhance conversation components and add duplication

- feat: add conversation duplication functionality
- fix: resolve OGDialogTemplate display issues
- style: improve mobile dropdown component design
- chore: standardize shared link title formatting

* style: update active item background color in select-item

* feat(conversation): add duplicate conversation functionality and UI integration

* feat(conversation): enable title renaming on double-click and improve input focus styles

* fix(conversation): remove "(Copy)" suffix from duplicated conversation title in logging

* fix(RevokeKeysButton): correct className duration property for smoother transitions

* refactor(conversation): ensure proper parent-child relationships and timestamps when message cloning

---------

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>

client/src/components/ui/Dropdown.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import * as Select from '@ariakit/react/select';
-import { cn } from '~/utils/';
 import type { Option } from '~/common';
+import { cn } from '~/utils/';
 
 interface DropdownProps {
   value: string;

client/src/components/ui/DropdownPopup.tsx

@@ -45,10 +45,7 @@ const DropdownPopup: React.FC<DropdownProps> = ({
       {trigger}
       <Ariakit.Menu
         id={menuId}
-        className={cn(
-          'absolute z-50 mt-2 overflow-hidden rounded-lg bg-header-primary p-1.5 shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
-          className,
-        )}
+        className={cn('popover-ui z-50', className)}
         gutter={gutter}
         modal={modal}
         sameWidth={sameWidth}
@@ -62,7 +59,7 @@ const DropdownPopup: React.FC<DropdownProps> = ({
               <Ariakit.MenuItem
                 key={index}
                 className={cn(
-                  'group flex w-full cursor-pointer items-center gap-2 rounded-lg p-2.5 text-sm text-text-primary outline-none transition-colors duration-200 hover:bg-surface-hover focus:bg-surface-hover',
+                  'group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-3.5 text-sm text-text-primary outline-none transition-colors duration-200 hover:bg-surface-hover focus:bg-surface-hover md:px-2.5 md:py-2',
                   itemClassName,
                 )}
                 disabled={item.disabled}
@@ -75,7 +72,7 @@ const DropdownPopup: React.FC<DropdownProps> = ({
                 }}
               >
                 {item.icon != null && (
-                  <span className={cn('mr-2 h-5 w-5', iconClassName)} aria-hidden="true">
+                  <span className={cn('mr-2 size-4', iconClassName)} aria-hidden="true">
                     {item.icon}
                   </span>
                 )}

client/src/components/ui/OGDialogTemplate.tsx

@@ -59,29 +59,33 @@ const OGDialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDi
       overlayClassName={overlayClassName}
       showCloseButton={showCloseButton}
       ref={ref}
-      className={cn('border-none bg-background text-foreground', className ?? '')}
+      className={cn('w-11/12 border-none bg-background text-foreground', className ?? '')}
       onClick={(e) => e.stopPropagation()}
     >
       <OGDialogHeader className={cn(headerClassName ?? '')}>
         <OGDialogTitle>{title}</OGDialogTitle>
-        {description && <OGDialogDescription className="">{description}</OGDialogDescription>}
+        {description && (
+          <OGDialogDescription className="items-center justify-center">
+            {description}
+          </OGDialogDescription>
+        )}
       </OGDialogHeader>
-      <div className={cn('px-0', mainClassName)}>{main != null ? main : null}</div>
+      <div className={cn('px-0 py-2', mainClassName)}>{main != null ? main : null}</div>
       <OGDialogFooter className={footerClassName}>
-        <div>{leftButtons != null ? leftButtons : null}</div>
-        <div className="flex h-auto gap-3">
+        <div>{leftButtons != null ? <div className="mt-3 sm:mt-0">{leftButtons}</div> : null}</div>
+        <div className="flex h-auto gap-3 max-sm:w-full max-sm:flex-col sm:flex-row">
+          {buttons != null ? buttons : null}
           {showCancelButton && (
-            <OGDialogClose className="btn btn-neutral border-token-border-light relative rounded-lg text-sm ring-offset-2 focus:ring-2 focus:ring-black dark:ring-offset-0">
+            <OGDialogClose className="btn btn-neutral border-token-border-light relative justify-center rounded-lg text-sm ring-offset-2 focus:ring-2 focus:ring-black dark:ring-offset-0 max-sm:order-last max-sm:w-full sm:order-first">
               {Cancel}
             </OGDialogClose>
           )}
-          {buttons != null ? buttons : null}
           {selection ? (
             <OGDialogClose
               onClick={selectHandler}
               className={`${
                 selectClasses ?? defaultSelect
-              } flex h-10 items-center justify-center rounded-lg border-none px-4 py-2 text-sm`}
+              } flex h-10 items-center justify-center rounded-lg border-none px-4 py-2 text-sm max-sm:order-first max-sm:w-full sm:order-none`}
             >
               {selectText}
             </OGDialogClose>