mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-05-03 20:01:16 +00:00
fixes
This commit is contained in:
Stijnus
parent
a94330e4a4
commit
723c6a4f02
@ -1,12 +1,18 @@
|
||||
import React, { memo } from 'react';
|
||||
import React, { memo, useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Switch } from '~/components/ui/Switch';
|
||||
import { useSettings } from '~/lib/hooks/useSettings';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { toast } from 'react-toastify';
|
||||
import { PromptLibrary } from '~/lib/common/prompt-library';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { isEventLogsEnabled } from '~/lib/stores/settings';
|
||||
import {
|
||||
isEventLogsEnabled,
|
||||
isLocalModelsEnabled,
|
||||
latestBranchStore as latestBranchAtom,
|
||||
promptStore as promptAtom,
|
||||
autoSelectStarterTemplate as autoSelectTemplateAtom,
|
||||
enableContextOptimizationStore as contextOptimizationAtom,
|
||||
} from '~/lib/stores/settings';
|
||||
|
||||
interface FeatureToggle {
|
||||
id: string;
|
||||
@ -107,21 +113,102 @@ const FeatureSection = memo(
|
||||
);
|
||||
|
||||
export default function FeaturesTab() {
|
||||
const {
|
||||
setEventLogs,
|
||||
isLocalModel,
|
||||
enableLocalModels,
|
||||
isLatestBranch,
|
||||
enableLatestBranch,
|
||||
promptId,
|
||||
setPromptId,
|
||||
autoSelectTemplate,
|
||||
setAutoSelectTemplate,
|
||||
enableContextOptimization,
|
||||
contextOptimizationEnabled,
|
||||
} = useSettings();
|
||||
const { autoSelectTemplate, isLatestBranch, contextOptimizationEnabled, eventLogs, isLocalModel } = useSettings();
|
||||
|
||||
const eventLogs = useStore(isEventLogsEnabled);
|
||||
// Setup store setters
|
||||
const setEventLogs = (value: boolean) => isEventLogsEnabled.set(value);
|
||||
const setLocalModels = (value: boolean) => isLocalModelsEnabled.set(value);
|
||||
const setLatestBranch = (value: boolean) => latestBranchAtom.set(value);
|
||||
const setPromptId = (value: string) => promptAtom.set(value);
|
||||
const setAutoSelectTemplate = (value: boolean) => autoSelectTemplateAtom.set(value);
|
||||
const setContextOptimization = (value: boolean) => contextOptimizationAtom.set(value);
|
||||
|
||||
const getLocalStorageBoolean = (key: string, defaultValue: boolean): boolean => {
|
||||
const value = localStorage.getItem(key);
|
||||
|
||||
if (value === null) {
|
||||
return defaultValue;
|
||||
}
|
||||
|
||||
try {
|
||||
return JSON.parse(value);
|
||||
} catch {
|
||||
return defaultValue;
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize state with proper type handling
|
||||
const autoSelectTemplateState = getLocalStorageBoolean('autoSelectTemplate', autoSelectTemplate);
|
||||
const enableLatestBranchState = getLocalStorageBoolean('enableLatestBranch', isLatestBranch);
|
||||
const contextOptimizationState = getLocalStorageBoolean('contextOptimization', contextOptimizationEnabled);
|
||||
const eventLogsState = getLocalStorageBoolean('eventLogs', eventLogs);
|
||||
const experimentalProvidersState = getLocalStorageBoolean('experimentalProviders', isLocalModel);
|
||||
const promptLibraryState = getLocalStorageBoolean('promptLibrary', false);
|
||||
const promptIdState = localStorage.getItem('promptId') ?? '';
|
||||
|
||||
const [autoSelectTemplateLocal, setAutoSelectTemplateLocal] = useState(autoSelectTemplateState);
|
||||
const [enableLatestBranchLocal, setEnableLatestBranchLocal] = useState(enableLatestBranchState);
|
||||
const [contextOptimizationLocal, setContextOptimizationLocal] = useState(contextOptimizationState);
|
||||
const [eventLogsLocal, setEventLogsLocal] = useState(eventLogsState);
|
||||
const [experimentalProvidersLocal, setExperimentalProvidersLocal] = useState(experimentalProvidersState);
|
||||
const [promptLibraryLocal, setPromptLibraryLocal] = useState(promptLibraryState);
|
||||
const [promptIdLocal, setPromptIdLocal] = useState(promptIdState);
|
||||
|
||||
useEffect(() => {
|
||||
// Update localStorage
|
||||
localStorage.setItem('autoSelectTemplate', JSON.stringify(autoSelectTemplateLocal));
|
||||
localStorage.setItem('enableLatestBranch', JSON.stringify(enableLatestBranchLocal));
|
||||
localStorage.setItem('contextOptimization', JSON.stringify(contextOptimizationLocal));
|
||||
localStorage.setItem('eventLogs', JSON.stringify(eventLogsLocal));
|
||||
localStorage.setItem('experimentalProviders', JSON.stringify(experimentalProvidersLocal));
|
||||
localStorage.setItem('promptLibrary', JSON.stringify(promptLibraryLocal));
|
||||
localStorage.setItem('promptId', promptIdLocal);
|
||||
|
||||
// Update global state
|
||||
setEventLogs(eventLogsLocal);
|
||||
setLocalModels(experimentalProvidersLocal);
|
||||
setLatestBranch(enableLatestBranchLocal);
|
||||
setPromptId(promptIdLocal);
|
||||
setAutoSelectTemplate(autoSelectTemplateLocal);
|
||||
setContextOptimization(contextOptimizationLocal);
|
||||
}, [
|
||||
autoSelectTemplateLocal,
|
||||
enableLatestBranchLocal,
|
||||
contextOptimizationLocal,
|
||||
eventLogsLocal,
|
||||
experimentalProvidersLocal,
|
||||
promptLibraryLocal,
|
||||
promptIdLocal,
|
||||
]);
|
||||
|
||||
const handleToggleFeature = (featureId: string, enabled: boolean) => {
|
||||
switch (featureId) {
|
||||
case 'latestBranch':
|
||||
setEnableLatestBranchLocal(enabled);
|
||||
toast.success(`Main branch updates ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
case 'autoTemplate':
|
||||
setAutoSelectTemplateLocal(enabled);
|
||||
toast.success(`Auto template selection ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
case 'contextOptimization':
|
||||
setContextOptimizationLocal(enabled);
|
||||
toast.success(`Context optimization ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
case 'eventLogs':
|
||||
setEventLogsLocal(enabled);
|
||||
toast.success(`Event logging ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
case 'experimentalProviders':
|
||||
setExperimentalProvidersLocal(enabled);
|
||||
toast.success(`Experimental providers ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
case 'promptLibrary':
|
||||
setPromptLibraryLocal(enabled);
|
||||
toast.success(`Prompt Library ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const features: Record<'stable' | 'beta' | 'experimental', FeatureToggle[]> = {
|
||||
stable: [
|
||||
@ -130,7 +217,7 @@ export default function FeaturesTab() {
|
||||
title: 'Auto Select Code Template',
|
||||
description: 'Let Bolt select the best starter template for your project',
|
||||
icon: 'i-ph:magic-wand',
|
||||
enabled: autoSelectTemplate,
|
||||
enabled: autoSelectTemplateLocal,
|
||||
tooltip: 'Automatically choose the most suitable template based on your project type',
|
||||
},
|
||||
{
|
||||
@ -138,7 +225,7 @@ export default function FeaturesTab() {
|
||||
title: 'Context Optimization',
|
||||
description: 'Optimize chat context by redacting file contents and using system prompts',
|
||||
icon: 'i-ph:arrows-in',
|
||||
enabled: contextOptimizationEnabled,
|
||||
enabled: contextOptimizationLocal,
|
||||
tooltip: 'Improve AI responses by optimizing the context window and system prompts',
|
||||
},
|
||||
{
|
||||
@ -146,9 +233,17 @@ export default function FeaturesTab() {
|
||||
title: 'Event Logging',
|
||||
description: 'Enable detailed event logging and history',
|
||||
icon: 'i-ph:list-bullets',
|
||||
enabled: eventLogs,
|
||||
enabled: eventLogsLocal,
|
||||
tooltip: 'Record detailed logs of system events and user actions',
|
||||
},
|
||||
{
|
||||
id: 'promptLibrary',
|
||||
title: 'Prompt Library',
|
||||
description: 'Manage your prompt library settings',
|
||||
icon: 'i-ph:library',
|
||||
enabled: promptLibraryLocal,
|
||||
tooltip: 'Enable or disable the prompt library',
|
||||
},
|
||||
],
|
||||
beta: [
|
||||
{
|
||||
@ -156,7 +251,7 @@ export default function FeaturesTab() {
|
||||
title: 'Use Main Branch',
|
||||
description: 'Check for updates against the main branch instead of stable',
|
||||
icon: 'i-ph:git-branch',
|
||||
enabled: isLatestBranch,
|
||||
enabled: enableLatestBranchLocal,
|
||||
beta: true,
|
||||
tooltip: 'Get the latest features and improvements before they are officially released',
|
||||
},
|
||||
@ -167,38 +262,13 @@ export default function FeaturesTab() {
|
||||
title: 'Experimental Providers',
|
||||
description: 'Enable experimental providers like Ollama, LMStudio, and OpenAILike',
|
||||
icon: 'i-ph:robot',
|
||||
enabled: isLocalModel,
|
||||
enabled: experimentalProvidersLocal,
|
||||
experimental: true,
|
||||
tooltip: 'Try out new AI providers and models in development',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const handleToggleFeature = (featureId: string, enabled: boolean) => {
|
||||
switch (featureId) {
|
||||
case 'latestBranch':
|
||||
enableLatestBranch(enabled);
|
||||
toast.success(`Main branch updates ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
case 'autoTemplate':
|
||||
setAutoSelectTemplate(enabled);
|
||||
toast.success(`Auto template selection ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
case 'contextOptimization':
|
||||
enableContextOptimization(enabled);
|
||||
toast.success(`Context optimization ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
case 'experimentalProviders':
|
||||
enableLocalModels(enabled);
|
||||
toast.success(`Experimental providers ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
case 'eventLogs':
|
||||
setEventLogs(enabled);
|
||||
toast.success(`Event logging ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
<FeatureSection
|
||||
@ -262,9 +332,9 @@ export default function FeaturesTab() {
|
||||
</p>
|
||||
</div>
|
||||
<select
|
||||
value={promptId}
|
||||
value={promptIdLocal}
|
||||
onChange={(e) => {
|
||||
setPromptId(e.target.value);
|
||||
setPromptIdLocal(e.target.value);
|
||||
toast.success('Prompt template updated');
|
||||
}}
|
||||
className={classNames(
|
||||
|
||||
@ -4,6 +4,7 @@ import { logStore } from '~/lib/stores/logs';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
|
||||
interface NotificationDetails {
|
||||
type?: string;
|
||||
@ -14,8 +15,10 @@ interface NotificationDetails {
|
||||
updateUrl?: string;
|
||||
}
|
||||
|
||||
type FilterType = 'all' | 'system' | 'error' | 'warning' | 'update' | 'info' | 'provider' | 'network';
|
||||
|
||||
const NotificationsTab = () => {
|
||||
const [filter, setFilter] = useState<'all' | 'error' | 'warning' | 'update'>('all');
|
||||
const [filter, setFilter] = useState<FilterType>('all');
|
||||
const logs = useStore(logStore.logs);
|
||||
|
||||
const handleClearNotifications = () => {
|
||||
@ -29,42 +32,64 @@ const NotificationsTab = () => {
|
||||
const filteredLogs = Object.values(logs)
|
||||
.filter((log) => {
|
||||
if (filter === 'all') {
|
||||
return log.level === 'error' || log.level === 'warning' || log.details?.type === 'update';
|
||||
return true;
|
||||
}
|
||||
|
||||
if (filter === 'update') {
|
||||
return log.details?.type === 'update';
|
||||
}
|
||||
|
||||
if (filter === 'system') {
|
||||
return log.category === 'system';
|
||||
}
|
||||
|
||||
if (filter === 'provider') {
|
||||
return log.category === 'provider';
|
||||
}
|
||||
|
||||
if (filter === 'network') {
|
||||
return log.category === 'network';
|
||||
}
|
||||
|
||||
return log.level === filter;
|
||||
})
|
||||
.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
|
||||
|
||||
const getNotificationStyle = (log: (typeof filteredLogs)[0]) => {
|
||||
if (log.details?.type === 'update') {
|
||||
const getNotificationStyle = (level: string, type?: string) => {
|
||||
if (type === 'update') {
|
||||
return {
|
||||
border: 'border-purple-200 dark:border-purple-900/50',
|
||||
bg: 'bg-purple-50 dark:bg-purple-900/20',
|
||||
icon: 'i-ph:arrow-circle-up text-purple-600 dark:text-purple-400',
|
||||
text: 'text-purple-900 dark:text-purple-300',
|
||||
icon: 'i-ph:arrow-circle-up',
|
||||
color: 'text-purple-500 dark:text-purple-400',
|
||||
bg: 'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
};
|
||||
}
|
||||
|
||||
if (log.level === 'error') {
|
||||
return {
|
||||
border: 'border-red-200 dark:border-red-900/50',
|
||||
bg: 'bg-red-50 dark:bg-red-900/20',
|
||||
icon: 'i-ph:warning-circle text-red-600 dark:text-red-400',
|
||||
text: 'text-red-900 dark:text-red-300',
|
||||
};
|
||||
switch (level) {
|
||||
case 'error':
|
||||
return {
|
||||
icon: 'i-ph:warning-circle',
|
||||
color: 'text-red-500 dark:text-red-400',
|
||||
bg: 'hover:bg-red-500/10 dark:hover:bg-red-500/20',
|
||||
};
|
||||
case 'warning':
|
||||
return {
|
||||
icon: 'i-ph:warning',
|
||||
color: 'text-yellow-500 dark:text-yellow-400',
|
||||
bg: 'hover:bg-yellow-500/10 dark:hover:bg-yellow-500/20',
|
||||
};
|
||||
case 'info':
|
||||
return {
|
||||
icon: 'i-ph:info',
|
||||
color: 'text-blue-500 dark:text-blue-400',
|
||||
bg: 'hover:bg-blue-500/10 dark:hover:bg-blue-500/20',
|
||||
};
|
||||
default:
|
||||
return {
|
||||
icon: 'i-ph:bell',
|
||||
color: 'text-gray-500 dark:text-gray-400',
|
||||
bg: 'hover:bg-gray-500/10 dark:hover:bg-gray-500/20',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
border: 'border-yellow-200 dark:border-yellow-900/50',
|
||||
bg: 'bg-yellow-50 dark:bg-yellow-900/20',
|
||||
icon: 'i-ph:warning text-yellow-600 dark:text-yellow-400',
|
||||
text: 'text-yellow-900 dark:text-yellow-300',
|
||||
};
|
||||
};
|
||||
|
||||
const renderNotificationDetails = (details: NotificationDetails) => {
|
||||
@ -79,7 +104,16 @@ const NotificationsTab = () => {
|
||||
</div>
|
||||
<button
|
||||
onClick={() => details.updateUrl && handleUpdateAction(details.updateUrl)}
|
||||
className="mt-2 inline-flex items-center gap-2 rounded-md bg-purple-50 px-3 py-1.5 text-sm font-medium text-purple-600 hover:bg-purple-100 dark:bg-purple-900/20 dark:text-purple-400 dark:hover:bg-purple-900/30"
|
||||
className={classNames(
|
||||
'mt-2 inline-flex items-center gap-2',
|
||||
'rounded-lg px-3 py-1.5',
|
||||
'text-sm font-medium',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'text-gray-900 dark:text-white',
|
||||
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<span className="i-ph:git-branch text-lg" />
|
||||
View Changes
|
||||
@ -91,54 +125,134 @@ const NotificationsTab = () => {
|
||||
return details.message ? <p className="text-sm text-gray-600 dark:text-gray-400">{details.message}</p> : null;
|
||||
};
|
||||
|
||||
const filterOptions: { id: FilterType; label: string; icon: string }[] = [
|
||||
{ id: 'all', label: 'All Notifications', icon: 'i-ph:bell' },
|
||||
{ id: 'system', label: 'System', icon: 'i-ph:gear' },
|
||||
{ id: 'update', label: 'Updates', icon: 'i-ph:arrow-circle-up' },
|
||||
{ id: 'error', label: 'Errors', icon: 'i-ph:warning-circle' },
|
||||
{ id: 'warning', label: 'Warnings', icon: 'i-ph:warning' },
|
||||
{ id: 'info', label: 'Information', icon: 'i-ph:info' },
|
||||
{ id: 'provider', label: 'Providers', icon: 'i-ph:robot' },
|
||||
{ id: 'network', label: 'Network', icon: 'i-ph:wifi-high' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value as 'all' | 'error' | 'warning' | 'update')}
|
||||
className="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm shadow-sm dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<option value="all">All Notifications</option>
|
||||
<option value="update">Updates</option>
|
||||
<option value="error">Errors</option>
|
||||
<option value="warning">Warnings</option>
|
||||
</select>
|
||||
</div>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button
|
||||
className={classNames(
|
||||
'flex items-center gap-2',
|
||||
'rounded-lg px-3 py-1.5',
|
||||
'text-sm text-gray-900 dark:text-white',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={classNames(
|
||||
filterOptions.find((opt) => opt.id === filter)?.icon || 'i-ph:funnel',
|
||||
'text-lg text-gray-500 dark:text-gray-400',
|
||||
)}
|
||||
/>
|
||||
{filterOptions.find((opt) => opt.id === filter)?.label || 'Filter Notifications'}
|
||||
<span className="i-ph:caret-down text-lg text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
className="min-w-[200px] bg-white dark:bg-gray-800 rounded-lg shadow-lg py-1 z-[250] animate-in fade-in-0 zoom-in-95"
|
||||
sideOffset={5}
|
||||
align="start"
|
||||
side="bottom"
|
||||
>
|
||||
{filterOptions.map((option) => (
|
||||
<DropdownMenu.Item
|
||||
key={option.id}
|
||||
className="group flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 cursor-pointer transition-colors"
|
||||
onClick={() => setFilter(option.id)}
|
||||
>
|
||||
<div className="mr-3 flex h-5 w-5 items-center justify-center">
|
||||
<div
|
||||
className={classNames(
|
||||
option.icon,
|
||||
'text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<span className="group-hover:text-purple-500 transition-colors">{option.label}</span>
|
||||
</DropdownMenu.Item>
|
||||
))}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
<button
|
||||
onClick={handleClearNotifications}
|
||||
className="rounded-md bg-gray-50 px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
|
||||
className={classNames(
|
||||
'group flex items-center gap-2',
|
||||
'rounded-lg px-3 py-1.5',
|
||||
'text-sm text-gray-900 dark:text-white',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<span className="i-ph:trash text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{filteredLogs.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center gap-4 rounded-lg border border-gray-200 p-8 text-center dark:border-gray-700">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={classNames(
|
||||
'flex flex-col items-center justify-center gap-4',
|
||||
'rounded-lg p-8 text-center',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
)}
|
||||
>
|
||||
<span className="i-ph:bell-slash text-4xl text-gray-400 dark:text-gray-600" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">No Notifications</h3>
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-white">No Notifications</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">You're all caught up!</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
filteredLogs.map((log) => {
|
||||
const style = getNotificationStyle(log);
|
||||
const style = getNotificationStyle(log.level, log.details?.type);
|
||||
return (
|
||||
<motion.div
|
||||
key={log.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={classNames('flex flex-col gap-2 rounded-lg border p-4', style.border, style.bg)}
|
||||
className={classNames(
|
||||
'flex flex-col gap-2',
|
||||
'rounded-lg p-4',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
style.bg,
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={classNames('text-lg', style.icon)} />
|
||||
<div>
|
||||
<h3 className={classNames('text-sm font-medium', style.text)}>{log.message}</h3>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className={classNames('text-lg', style.icon, style.color)} />
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-white">{log.message}</h3>
|
||||
{log.details && renderNotificationDetails(log.details as NotificationDetails)}
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Category: {log.category}
|
||||
{log.subCategory ? ` > ${log.subCategory}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<time className="shrink-0 text-xs text-gray-500 dark:text-gray-400">
|
||||
|
||||
@ -53,13 +53,19 @@ export const isDebugMode = atom(false);
|
||||
const savedEventLogs = Cookies.get('isEventLogsEnabled');
|
||||
export const isEventLogsEnabled = atom(savedEventLogs === 'true');
|
||||
|
||||
// Local models settings
|
||||
export const isLocalModelsEnabled = atom(true);
|
||||
|
||||
// Prompt settings
|
||||
export const promptStore = atom<string>('default');
|
||||
|
||||
// Branch settings
|
||||
export const latestBranchStore = atom(false);
|
||||
|
||||
// Template settings
|
||||
export const autoSelectStarterTemplate = atom(false);
|
||||
|
||||
// Context optimization settings
|
||||
export const enableContextOptimizationStore = atom(false);
|
||||
|
||||
// Initialize tab configuration from cookie or default
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { ActionFunctionArgs } from '@remix-run/cloudflare';
|
||||
import type { ActionFunctionArgs, LoaderFunction } from '@remix-run/cloudflare';
|
||||
import { json } from '@remix-run/cloudflare';
|
||||
|
||||
interface PackageJson {
|
||||
@ -27,6 +27,23 @@ const packageJson = {
|
||||
},
|
||||
} as PackageJson;
|
||||
|
||||
export const loader: LoaderFunction = async ({ request: _request }) => {
|
||||
try {
|
||||
return json({
|
||||
name: packageJson.name,
|
||||
version: packageJson.version,
|
||||
description: packageJson.description,
|
||||
license: packageJson.license,
|
||||
nodeVersion: process.version,
|
||||
dependencies: packageJson.dependencies,
|
||||
devDependencies: packageJson.devDependencies,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to get webapp info:', error);
|
||||
return json({ error: 'Failed to get webapp information' }, { status: 500 });
|
||||
}
|
||||
};
|
||||
|
||||
export const action = async ({ request: _request }: ActionFunctionArgs) => {
|
||||
try {
|
||||
return json({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user