🪄 refactor: UI Refresh & Agents/Code Interpreter Docs (#174)

* ✨ feat: update home page layout and add usage statistics components * 🔃 chore: clean up eslint-module-utils dependency entries in pnpm-lock.yaml * ✨ feat: a lot of things * ✨ feat: UI adjustements * ✨ feat: improve author card links, update background colors, and enhance layout responsiveness * chore: update bun * ✨ feat: update GitHub stars and Docker pulls statistics * ✨ feat: update demo link to new preview URL * ✨ feat: update features section with new Code Interpreter and adjust layout * ✨ feat: add emoji to Quick Start title for enhanced visibility * refactor: move user guides to features section * ✨ feat: add emojis to installation and user guides for improved clarity * ✨ feat: update Hero component title and description for clarity and enhance demo link * feat: agents page * ✨ feat: update agents documentation to clarify built-in tools and mention future integrations * ✨ feat: add Code Interpreter API documentation and update agents metadata * ✨ feat: add Code Interpreter page metadata and integrate sparkles effect in Hero component * chore: comment out NewsletterForm component in Home page * style: code interpreter gif for features box * fix: update Agents link to point to the correct features documentation * fix: pnpm lockfile * docs: API key notes for code interpreter api * refactor: improve MobileSwitch component with TypeScript types and null check * chore: types, packages * chore: update ESLint configuration and add linting step to CI workflow fix: update rotate prop type in Card component to accept number or string * docs: add section on intellectual property protection for Code Interpreter * docs: refine agents customization features in documentation * style: hero page --------- Co-authored-by: Marco Beretta <[email protected]>
LibreChat-AI · Dec 7, 2024 · 113249e · 113249e
1 parent a058b0d
commit 113249e
Show file tree

Hide file tree

Showing 68 changed files with 3,237 additions and 653 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -14,6 +14,13 @@ module.exports = {
   root: true,
   reportUnusedDisableDirectives: true,
   ignorePatterns: ['next-env.d.ts'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@next/next/recommended',
+    'plugin:import/typescript',
+    'prettier',
+  ],
   overrides: [
     // Rules for all files
     {
@@ -56,7 +63,6 @@ module.exports = {
         'plugin:react/recommended',
         'plugin:react/jsx-runtime',
         'plugin:react-hooks/recommended',
-        'plugin:@next/next/recommended',
       ],
       rules: {
         'react/prop-types': 'off',

diff --git a/.github/workflows/nextjs_bundle_analysis.yml b/.github/workflows/nextjs_bundle_analysis.yml
@@ -56,6 +56,12 @@ jobs:
       #     # change this if you prefer a more strict cache
       #     key: ${{ runner.os }}-build-${{ env.cache-name }}
 
+      - name: Install ESLint
+        run: pnpm add -D eslint @next/eslint-plugin-next
+
+      - name: Run ESLint
+        run: pnpm eslint .
+
       - name: Build next.js app
         # change this if your site requires a custom build command
         run: ./node_modules/.bin/next build

diff --git a/bun.lockb b/bun.lockb
diff --git a/components/Author/AuthorProfile.tsx b/components/Author/AuthorProfile.tsx
@@ -18,7 +18,8 @@ interface AuthorMetadata {
   name: string
   bio: string
   ogImage: string
-  socials?: Record<string, string> // Dynamically match social media platforms
+  socials?: Record<string, string | undefined> // Dynamically match social media platforms
+  date: string | number | Date
 }
 
 interface AuthorProfileProps {
@@ -28,7 +29,7 @@ interface AuthorProfileProps {
 const AuthorProfile: React.FC<AuthorProfileProps> = ({ authorId }) => {
   const authors = getPagesUnderRoute('/authors') as Array<Page & { frontMatter: AuthorMetadata }>
   const author = authors.find((a) => a.frontMatter.authorid === authorId)?.frontMatter
-  const blogPosts = getPagesUnderRoute('/blog') as Array<Page & { frontMatter: any }>
+  const blogPosts = getPagesUnderRoute('/blog') as Array<Page & { frontMatter: AuthorMetadata }>
 
   // Filter posts by the current authorId
   const authorPosts = blogPosts.filter((post) => post.frontMatter.authorid === authorId)
@@ -104,7 +105,7 @@ const AuthorProfile: React.FC<AuthorProfileProps> = ({ authorId }) => {
             <BlogCard
               key={post.route}
               page={post}
-              handleTagClick={(tag) => console.log('Tag clicked:', tag)}
+              handleTagClick={(tag: unknown) => console.log('Tag clicked:', tag)}
               selectedTags={undefined}
             />
           ))}

diff --git a/components/FooterMenu.tsx b/components/FooterMenu.tsx
@@ -1,5 +1,14 @@
 import Link from 'next/link'
-import { SocialIcon } from 'react-social-icons'
+import { FloatingDock } from '@/components/ui/floating-dock'
+import {
+  IconBrandGithub,
+  IconBrandDiscord,
+  IconBrandLinkedin,
+  IconBrandTwitter,
+  IconBrandYoutube,
+  IconMail,
+} from '@tabler/icons-react'
+import { useMediaQuery } from 'react-responsive'
 
 const menuItems: {
   heading: string
@@ -97,6 +106,41 @@ const menuItems: {
 ]
 
 const FooterMenu = () => {
+  const isMobile = useMediaQuery({ query: '(max-width: 640px)' })
+
+  const socialLinks = [
+    {
+      title: 'GitHub',
+      icon: <IconBrandGithub className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
+      href: 'https://github.librechat.ai/',
+    },
+    {
+      title: 'Discord',
+      icon: <IconBrandDiscord className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
+      href: 'https://discord.librechat.ai/',
+    },
+    {
+      title: 'LinkedIn',
+      icon: <IconBrandLinkedin className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
+      href: 'https://linkedin.librechat.ai/',
+    },
+    {
+      title: 'Twitter',
+      icon: <IconBrandTwitter className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
+      href: 'https://x.com/LibreChatAI',
+    },
+    {
+      title: 'YouTube',
+      icon: <IconBrandYoutube className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
+      href: 'https://www.youtube.com/@LibreChat',
+    },
+    {
+      title: 'Email',
+      icon: <IconMail className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
+      href: 'mailto:[email protected]',
+    },
+  ]
+
   return (
     <div className="w-full">
       <div className="grid grid-cols-2 md:grid-cols-6 text-base gap-y-8 gap-x-2">
@@ -116,52 +160,10 @@ const FooterMenu = () => {
         ))}
         <div className="flex items-center justify-between md:col-span-6">
           <div className="font-sans text-sm">© {new Date().getFullYear()} LibreChat</div>
-          <div className="flex ml-auto">
-            <SocialIcon
-              url="https://github.librechat.ai/"
-              className="absolute inset-0 w-full h-full transform scale-100 transition-transform opacity-100 hover:scale-90"
-              style={{ height: 40, width: 40 }}
-              bgColor="background"
-              fgColor="#9B9B9B80"
-            />
-            <SocialIcon
-              url="https://discord.librechat.ai/"
-              className="absolute inset-0 w-full h-full transform scale-100 transition-transform opacity-100 hover:scale-90"
-              style={{ height: 40, width: 40 }}
-              bgColor="background"
-              fgColor="#9B9B9B80"
-            />
-            <SocialIcon
-              url="https://linkedin.librechat.ai/"
-              className="absolute inset-0 w-full h-full transform scale-100 transition-transform opacity-100 hover:scale-90"
-              style={{ height: 40, width: 40 }}
-              bgColor="background"
-              fgColor="#9B9B9B80"
-            />
-            <SocialIcon
-              url="https://x.com/LibreChatAI"
-              className="absolute inset-0 w-full h-full transform scale-100 transition-transform opacity-100 hover:scale-90"
-              style={{ height: 40, width: 40 }}
-              bgColor="background"
-              fgColor="#9B9B9B80"
-            />
-            <SocialIcon
-              url="https://www.youtube.com/@LibreChat"
-              className="absolute inset-0 w-full h-full transform scale-100 transition-transform opacity-100 hover:scale-90"
-              style={{ height: 40, width: 40 }}
-              bgColor="background"
-              fgColor="#9B9B9B80"
-            />
-            <SocialIcon
-              url="mailto:[email protected]"
-              className="absolute inset-0 w-full h-full transform scale-100 transition-transform opacity-100 hover:scale-90"
-              style={{ height: 40, width: 40 }}
-              bgColor="background"
-              fgColor="#9B9B9B80"
-            />
-          </div>
+          {!isMobile && <FloatingDock items={socialLinks} desktopClassName="ml-auto" />}
         </div>
       </div>
+      {isMobile && <FloatingDock items={socialLinks} mobileClassName="mt-4" />}
     </div>
   )
 }

diff --git a/components/Newsletter/SubscribeForm.tsx b/components/Newsletter/SubscribeForm.tsx
@@ -1,6 +1,6 @@
+import validator from 'validator'
 import React, { useState } from 'react'
 import toast, { Toaster } from 'react-hot-toast'
-import validator from 'validator'
 import style from './newsletterform.module.css'
 
 const isDevelopment = true //TODO

diff --git a/components/Newsletter/newsletterform.module.css b/components/Newsletter/newsletterform.module.css
@@ -1,74 +1,74 @@
 .container {
-    text-align: center;
+  text-align: center;
 }
 
 .form-wrapper {
-    max-width: 400px;
-    margin: 0 auto;
-    border-radius: 10px;
-    overflow: hidden;
-    background-color: #f1f1f1;
+  max-width: 400px;
+  margin: 0 auto;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #f1f1f1;
 }
 :global(.dark) .form-wrapper {
-  background-color: #171717;
+  background-color: #111111;
 }
 .form-title {
-    padding: 15px;
-    color:#454545;
+  padding: 15px;
+  color: #454545;
 }
 
 :global(.dark) .form-title {
-    color:#9b9b9b;
+  color: #9b9b9b;
 }
 
 .form-container {
-    padding: 20px;
+  padding: 20px;
 }
 
 .email-input {
-    padding: 8px;
-    /* border: 1px solid #3e3e3e; */
-    border-radius: 5px;
-    margin-bottom: 10px;
-    width: 100%;
-    background-color: #fff;
+  padding: 8px;
+  /* border: 1px solid #3e3e3e; */
+  border-radius: 5px;
+  margin-bottom: 10px;
+  width: 100%;
+  background-color: #fff;
 }
 
 .email-input::placeholder {
-    color: #5a5a5a;
+  color: #5a5a5a;
 }
 .email-input::placeholder {
-    color: #5a5a5a;
+  color: #5a5a5a;
 }
 
 :global(.dark) .email-input {
-    background-color: #29292a;
+  background-color: #29292a;
 }
 
 .subscribe-button {
-    padding: 8px 16px;
-    background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
-    background-size: 600%;
-    animation: anime 16s linear infinite;
-    color: rgba(255, 255, 255, 0.9);
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    width: 100%;
+  padding: 8px 16px;
+  background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
+  background-size: 600%;
+  animation: anime 16s linear infinite;
+  color: rgba(255, 255, 255, 0.9);
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  width: 100%;
 }
 
 .subscribe-button:hover {
-    filter: brightness(110%);
+  filter: brightness(110%);
 }
 
 @keyframes anime {
-    0% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
-    }
-    100% {
-        background-position: 0% 50%;
-    }
-}
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
diff --git a/components/blog/BlogCard.tsx b/components/blog/BlogCard.tsx
@@ -18,7 +18,7 @@ const BlogCard = ({ page, handleTagClick, selectedTags = [] }) => {
 
   useEffect(() => {
     const updateCardWidth = () => {
-      setCardWidth(document.querySelector('.blog-card').clientWidth)
+      setCardWidth(document.querySelector('.blog-card')?.clientWidth ?? 0)
     }
     window.addEventListener('resize', updateCardWidth)
     updateCardWidth()

diff --git a/components/callouts/style.module.css b/components/callouts/style.module.css
@@ -46,7 +46,7 @@
 }
 
 :global(.dark) .callout-content {
-  background-color: #000000cc; /* Separate background color for content */
+  background-color: #080808cc; /* Separate background color for content */
   color: #fff;
 }
 
@@ -116,7 +116,7 @@
 }
 
 :global(.dark) .callout {
-  --content-background-color: #111111;
+  --content-background-color: #080808;
 
   --default-border-color: #9e9e9e;
   --default-background-color: #2b2e35;