[pull] main from olegshulyakov:main

CHANGELOG.md

@@ -1,3 +1,18 @@
+## [2.38.1] - 2025-10-15
+
+### 🚀 Enhancements
+
+- _(sidebar)_ Add conversation search functionality (#223)
+
+### 🎨 Styling
+
+- _(chat)_ Update styling for main content and chat input (#224)
+
+### 🚜 Refactor
+
+- _(Input)_ Replace native input with custom Input component (#222)
+- _(icon)_ Migrate to direct icon component usage (#225)
+
 ## [2.38.0] - 2025-10-12
 
 ### 🚀 Enhancements

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "llama.ui",
   "description": "A minimal Interface for AI Companion that runs entirely in your browser.",
-  "version": "2.38.0",
+  "version": "2.38.1",
   "homepage": "https://llama-ui.js.org/",
   "license": "MIT",
   "type": "module",

src/App.tsx

@@ -55,7 +55,7 @@ const AppLayout: FC = () => {
       <div className="drawer-content flex flex-col w-full h-screen px-1 md:px-2 bg-base-300">
         <Header />
         <main
-          className="grow flex flex-col overflow-auto bg-base-100 rounded-xl"
+          className="grow flex flex-col overflow-auto bg-base-100 rounded-xl border-1 border-base-content/20 border-input inset-shadow-sm"
           id="main-scroll"
         >
           <Outlet />

src/components/Button.tsx

@@ -2,7 +2,7 @@ import { cva, VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { cn } from '../utils';
 
-const variants = cva('btn', {
+const ButtonVariants = cva('btn', {
   variants: {
     variant: {
       default: '',
@@ -15,8 +15,9 @@ const variants = cva('btn', {
       default: '',
       small: 'btn-sm',
       icon: 'w-8 h-8 p-0',
-      'icon-rounded': 'w-8 h-8 p-0 rounded-full',
-      'icon-small': 'btn-sm w-4 h-4 p-0 rounded-full',
+      'icon-sm': 'btn-sm w-4 h-4 p-0 rounded-full',
+      'icon-md': 'btn-sm w-5 h-5 p-0 rounded-full',
+      'icon-xl': 'w-8 h-8 p-0 rounded-full',
     },
   },
   defaultVariants: {
@@ -26,13 +27,13 @@ const variants = cva('btn', {
 });
 
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
-  VariantProps<typeof variants>;
+  VariantProps<typeof ButtonVariants>;
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, ...props }, ref) => (
     <button
       type="button"
-      className={cn(variants({ variant, size, className }))}
+      className={cn(ButtonVariants({ variant, size, className }))}
       ref={ref}
       dir="auto"
       {...props}

src/components/Dropdown.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { LuChevronDown } from 'react-icons/lu';
 import { isDev } from '../config';
 import { classNames } from '../utils';
 import { Button } from './Button';
@@ -114,7 +115,9 @@ export function Dropdown<T extends DropdownOption>({
           >
             {currentValue}
             {!hideChevron && (
-              <Icon icon="LuChevronDown" variant="rightside" size="md" />
+              <Icon variant="rightside" size="md">
+                <LuChevronDown />
+              </Icon>
             )}
           </summary>
 

src/components/Header.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { LuCog, LuMenu, LuSquarePen } from 'react-icons/lu';
 import { useNavigate } from 'react-router';
 import { useAppContext } from '../store/app';
 import { useChatContext } from '../store/chat';
@@ -42,7 +43,9 @@ export default function Header() {
       <section className="flex flex-row items-center xl:hidden">
         {/* open sidebar button */}
         <Label variant="btn-ghost" size="icon" htmlFor="toggle-drawer">
-          <Icon icon="LuMenu" size="md" />
+          <Icon size="md">
+            <LuMenu />
+          </Icon>
         </Label>
 
         {/* spacer */}
@@ -63,12 +66,14 @@ export default function Header() {
         {/* new conversation button */}
         <Button
           variant="ghost"
-          size="icon-rounded"
+          size="icon-xl"
           onClick={() => navigate('/')}
           title={t('header.buttons.newConv')}
           aria-label={t('header.ariaLabels.newConv')}
         >
-          <Icon icon="LuSquarePen" size="md" />
+          <Icon size="md">
+            <LuSquarePen />
+          </Icon>
         </Button>
       </section>
 
@@ -122,14 +127,16 @@ export default function Header() {
           <div className="flex items-center">
             <Button
               variant="ghost"
-              size="icon-rounded"
+              size="icon-xl"
               className="max-xl:hidden"
               title={t('header.buttons.settings')}
               aria-label={t('header.ariaLabels.settings')}
               onClick={() => navigate('/settings')}
             >
               {/* settings button */}
-              <Icon icon="LuCog" size="md" />
+              <Icon size="md">
+                <LuCog />
+              </Icon>
             </Button>
           </div>
         </section>

src/components/Icon.tsx

@@ -1,11 +1,8 @@
 import { cva, VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { IconBaseProps } from 'react-icons';
-import * as LucideIcons from 'react-icons/lu';
 import { cn } from '../utils';
 
-type IconNames = keyof Omit<typeof LucideIcons, 'IconContext'>;
-
 const iconVariants = cva('', {
   variants: {
     library: {
@@ -26,43 +23,36 @@ const iconVariants = cva('', {
   },
   defaultVariants: {
     library: 'lucide',
+    size: 'sm',
   },
 });
 
 type IconProps = Omit<IconBaseProps, 'size'> &
   VariantProps<typeof iconVariants> &
   React.SVGAttributes<SVGSVGElement> & {
     className?: string;
-    icon: IconNames;
+    children: React.ReactElement<IconBaseProps>;
   };
 
 const Icon = React.forwardRef<SVGSVGElement, IconProps>(
-  ({ className, library = 'lucide', variant, size, icon, ...props }, ref) => {
-    let SelectedIcon: React.ElementType;
-
-    switch (library) {
-      case 'lucide':
-        SelectedIcon = LucideIcons[icon];
-        break;
-      default:
-        throw new Error(`Library "${library}" not found in icons`);
+  ({ className, variant, size, children, ...props }, ref) => {
+    if (!children) {
+      throw new Error('Icon component requires a child icon element');
     }
 
-    if (!SelectedIcon) {
-      throw new Error(`Icon "${icon}" not found in Lucide icons`);
-    }
+    const iconElement = React.cloneElement(children, {
+      className: cn(
+        iconVariants({ variant, size, className }),
+        children.props.className
+      ),
+      ref,
+      ...props,
+    });
 
-    return (
-      <SelectedIcon
-        ref={ref}
-        className={cn(iconVariants({ library, variant, size, className }))}
-        {...props}
-      />
-    );
+    return iconElement;
   }
 );
 
 Icon.displayName = 'Icon';
 
-export default Icon;
 export { Icon };

src/components/Label.tsx

@@ -2,23 +2,23 @@ import { cva, VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { cn } from '../utils';
 
-const variants = cva('', {
+const LabelVariants = cva('', {
   variants: {
     variant: {
       default: '',
       'group-title': 'block font-bold text-base-content text-start',
       'fake-btn': 'text-center cursor-pointer',
       btn: 'btn',
       'btn-ghost': 'btn btn-ghost',
-      'form-control': 'form-control flex flex-col justify-center mb-3',
+      'form-control': 'form-control flex flex-col justify-center',
       'input-bordered':
-        'input input-bordered join-item grow flex items-center gap-2 mb-1',
+        'input input-bordered join-item grow flex items-center gap-2 focus-within:outline-1 focus-within:outline-offset-0 inset-shadow-xs',
     },
     size: {
       default: '',
       xs: 'text-xs',
       icon: 'w-8 h-8 p-0',
-      'icon-rounded': 'w-8 h-8 p-0 rounded-full',
+      'icon-xl': 'w-8 h-8 p-0 rounded-full',
     },
   },
   defaultVariants: {
@@ -28,12 +28,12 @@ const variants = cva('', {
 });
 
 export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> &
-  VariantProps<typeof variants>;
+  VariantProps<typeof LabelVariants>;
 
 const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
   ({ className, variant, size, ...props }, ref) => (
     <label
-      className={cn(variants({ variant, size, className }))}
+      className={cn(LabelVariants({ variant, size, className }))}
       ref={ref}
       {...props}
     />