fix: welcome screen ui (#780)

block · Jan 26, 2025 · 1fe48a0 · 1fe48a0
1 parent 0b354f4
commit 1fe48a0
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 523 deletions.
diff --git a/ui/desktop/src/components/settings/providers/BaseProviderGrid.tsx b/ui/desktop/src/components/settings/providers/BaseProviderGrid.tsx
@@ -32,6 +32,19 @@ function getArticle(word: string): string {
   return 'aeiouAEIOU'.indexOf(word[0]) >= 0 ? 'an' : 'a';
 }
 
+export function getProviderDescription(provider) {
+  const descriptions = {
+    OpenAI: 'Access GPT-4, GPT-3.5 Turbo, and other OpenAI models',
+    Anthropic: 'Access Claude and other Anthropic models',
+    Google: 'Access Gemini and other Google AI models',
+    Groq: 'Access Mixtral and other Groq-hosted models',
+    Databricks: 'Access models hosted on your Databricks instance',
+    OpenRouter: 'Access a variety of AI models through OpenRouter',
+    Ollama: 'Run and use open-source models locally',
+  };
+  return descriptions[provider] || `Access ${provider} models`;
+}
+
 function BaseProviderCard({
   name,
   description,
@@ -51,8 +64,12 @@ function BaseProviderCard({
 
   return (
     <div className="relative h-full p-[2px] overflow-hidden rounded-[9px] group/card bg-borderSubtle hover:bg-transparent hover:duration-300">
-      <div className="absolute opacity-0 group-hover/card:opacity-100 pointer-events-none w-[260px] h-[260px] top-[-50px] left-[-30px] origin-center bg-[linear-gradient(45deg,#13BBAF,#FF4F00)] animate-[rotate_6s_linear_infinite] z-[-1]"></div>
-
+      {/* Glowing ring */}
+      <div
+        className={`absolute pointer-events-none w-[260px] h-[260px] top-[-50px] left-[-30px] origin-center bg-[linear-gradient(45deg,#13BBAF,#FF4F00)] animate-[rotate_6s_linear_infinite] z-[-1] ${
+          isSelected ? 'opacity-100' : 'opacity-0 group-hover/card:opacity-100'
+        }`}
+      ></div>
       <div
         onClick={() => isSelectable && isConfigured && onSelect?.()}
         className={`relative bg-bgApp rounded-lg

diff --git a/ui/desktop/src/components/settings/providers/ConfigureProviders.tsx b/ui/desktop/src/components/settings/providers/ConfigureProviders.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Providers } from './Provider';
 import { ScrollArea } from '../../ui/scroll-area';
 import BackButton from '../../ui/BackButton';
 import { ConfigureProvidersGrid } from './ConfigureProvidersGrid';

diff --git a/ui/desktop/src/components/settings/providers/ConfigureProvidersGrid.tsx b/ui/desktop/src/components/settings/providers/ConfigureProvidersGrid.tsx
@@ -1,8 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { useActiveKeys } from '../api_keys/ActiveKeysContext';
-import { BaseProviderGrid } from './BaseProviderGrid';
+import { BaseProviderGrid, getProviderDescription } from './BaseProviderGrid';
 import { supported_providers, provider_aliases, required_keys } from '../models/hardcoded_stuff';
-import { getProviderDescription } from './Provider';
 import { ProviderSetupModal } from '../ProviderSetupModal';
 import { getApiUrl, getSecretKey } from '../../../config';
 import { toast } from 'react-toastify';

diff --git a/ui/desktop/src/components/settings/providers/Header.tsx b/ui/desktop/src/components/settings/providers/Header.tsx