@nextclaw/ui 0.2.1

package/src/components/common/TagInput.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface TagInputProps {
+  value: string[];
+  onChange: (tags: string[]) => void;
+  className?: string;
+  placeholder?: string;
+}
+
+export function TagInput({ value, onChange, className, placeholder = 'Type and press Enter...' }: TagInputProps) {
+  const [input, setInput] = useState('');
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && input.trim()) {
+      e.preventDefault();
+      onChange([...value, input.trim()]);
+      setInput('');
+    } else if (e.key === 'Backspace' && !input && value.length > 0) {
+      onChange(value.slice(0, -1));
+    }
+  };
+
+  const removeTag = (index: number) => {
+    onChange(value.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div className={cn('flex flex-wrap gap-2 p-2 border rounded-md min-h-[42px]', className)}>
+      {value.map((tag, index) => (
+        <span
+          key={index}
+          className="inline-flex items-center gap-1 px-2 py-1 bg-primary text-primary-foreground rounded text-sm"
+        >
+          {tag}
+          <button
+            type="button"
+            onClick={() => removeTag(index)}
+            className="hover:text-red-300 transition-colors"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </span>
+      ))}
+      <input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={handleKeyDown}
+        className="flex-1 outline-none min-w-[100px] bg-transparent text-sm"
+        placeholder={placeholder}
+      />
+    </div>
+  );
+}

package/src/components/config/ChannelForm.tsx

@@ -0,0 +1,259 @@
+import { useEffect, useState } from 'react';
+import { useConfig, useUpdateChannel } from '@/hooks/useConfig';
+import { useUiStore } from '@/stores/ui.store';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { TagInput } from '@/components/common/TagInput';
+import { t } from '@/lib/i18n';
+import { MessageCircle, Settings, ToggleLeft, Hash, Mail, Globe, KeyRound } from 'lucide-react';
+
+// Field icon mapping
+const getFieldIcon = (fieldName: string) => {
+  if (fieldName.includes('token') || fieldName.includes('secret') || fieldName.includes('password')) {
+    return <KeyRound className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />;
+  }
+  if (fieldName.includes('url') || fieldName.includes('host')) {
+    return <Globe className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />;
+  }
+  if (fieldName.includes('email') || fieldName.includes('mail')) {
+    return <Mail className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />;
+  }
+  if (fieldName.includes('id') || fieldName.includes('from')) {
+    return <Hash className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />;
+  }
+  if (fieldName === 'enabled' || fieldName === 'consentGranted') {
+    return <ToggleLeft className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />;
+  }
+  return <Settings className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />;
+};
+
+// Channel field definitions
+const CHANNEL_FIELDS: Record<string, Array<{ name: string; type: string; label: string }>> = {
+  telegram: [
+    { name: 'enabled', type: 'boolean', label: t('enabled') },
+    { name: 'token', type: 'password', label: t('botToken') },
+    { name: 'allowFrom', type: 'tags', label: t('allowFrom') },
+    { name: 'proxy', type: 'text', label: t('proxy') }
+  ],
+  discord: [
+    { name: 'enabled', type: 'boolean', label: t('enabled') },
+    { name: 'token', type: 'password', label: t('botToken') },
+    { name: 'allowFrom', type: 'tags', label: t('allowFrom') },
+    { name: 'gatewayUrl', type: 'text', label: t('gatewayUrl') },
+    { name: 'intents', type: 'number', label: t('intents') }
+  ],
+  whatsapp: [
+    { name: 'enabled', type: 'boolean', label: t('enabled') },
+    { name: 'bridgeUrl', type: 'text', label: t('bridgeUrl') },
+    { name: 'allowFrom', type: 'tags', label: t('allowFrom') }
+  ],
+  feishu: [
+    { name: 'enabled', type: 'boolean', label: t('enabled') },
+    { name: 'appId', type: 'text', label: t('appId') },
+    { name: 'appSecret', type: 'password', label: t('appSecret') },
+    { name: 'encryptKey', type: 'password', label: t('encryptKey') },
+    { name: 'verificationToken', type: 'password', label: t('verificationToken') },
+    { name: 'allowFrom', type: 'tags', label: t('allowFrom') }
+  ],
+  dingtalk: [
+    { name: 'enabled', type: 'boolean', label: t('enabled') },
+    { name: 'clientId', type: 'text', label: t('clientId') },
+    { name: 'clientSecret', type: 'password', label: t('clientSecret') },
+    { name: 'allowFrom', type: 'tags', label: t('allowFrom') }
+  ],
+  slack: [
+    { name: 'enabled', type: 'boolean', label: t('enabled') },
+    { name: 'mode', type: 'text', label: t('mode') },
+    { name: 'webhookPath', type: 'text', label: t('webhookPath') },
+    { name: 'botToken', type: 'password', label: t('botToken') },
+    { name: 'appToken', type: 'password', label: t('appToken') }
+  ],
+  email: [
+    { name: 'enabled', type: 'boolean', label: t('enabled') },
+    { name: 'consentGranted', type: 'boolean', label: t('consentGranted') },
+    { name: 'imapHost', type: 'text', label: t('imapHost') },
+    { name: 'imapPort', type: 'number', label: t('imapPort') },
+    { name: 'imapUsername', type: 'text', label: t('imapUsername') },
+    { name: 'imapPassword', type: 'password', label: t('imapPassword') },
+    { name: 'fromAddress', type: 'email', label: t('fromAddress') }
+  ],
+  mochat: [
+    { name: 'enabled', type: 'boolean', label: t('enabled') },
+    { name: 'baseUrl', type: 'text', label: t('baseUrl') },
+    { name: 'clawToken', type: 'password', label: t('clawToken') },
+    { name: 'agentUserId', type: 'text', label: t('agentUserId') },
+    { name: 'allowFrom', type: 'tags', label: t('allowFrom') }
+  ],
+  qq: [
+    { name: 'enabled', type: 'boolean', label: t('enabled') },
+    { name: 'appId', type: 'text', label: t('appId') },
+    { name: 'secret', type: 'password', label: t('secret') },
+    { name: 'allowFrom', type: 'tags', label: t('allowFrom') }
+  ]
+};
+
+const channelIcons: Record<string, typeof MessageCircle> = {
+  telegram: MessageCircle,
+  slack: MessageCircle,
+  email: Mail,
+  default: MessageCircle
+};
+
+const channelColors: Record<string, string> = {
+  telegram: 'from-sky-400 to-blue-500',
+  slack: 'from-purple-400 to-indigo-500',
+  email: 'from-rose-400 to-pink-500',
+  default: 'from-slate-400 to-gray-500'
+};
+
+export function ChannelForm() {
+  const { channelModal, closeChannelModal } = useUiStore();
+  const { data: config } = useConfig();
+  const updateChannel = useUpdateChannel();
+
+  const [formData, setFormData] = useState<Record<string, unknown>>({});
+
+  const channelName = channelModal.channel;
+  const channelConfig = channelName ? config?.channels[channelName] : null;
+  const fields = channelName ? CHANNEL_FIELDS[channelName] : [];
+
+  useEffect(() => {
+    if (channelConfig) {
+      setFormData({ ...channelConfig });
+    } else {
+      setFormData({});
+    }
+  }, [channelConfig, channelName]);
+
+  const updateField = (name: string, value: unknown) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!channelName) return;
+
+    updateChannel.mutate(
+      { channel: channelName, data: formData },
+      { onSuccess: () => closeChannelModal() }
+    );
+  };
+
+  const Icon = channelIcons[channelName || ''] || channelIcons.default;
+  const gradientClass = channelColors[channelName || ''] || channelColors.default;
+
+  return (
+    <Dialog open={channelModal.open} onOpenChange={closeChannelModal}>
+      <DialogContent className="sm:max-w-[550px] max-h-[85vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <div className="flex items-center gap-3">
+            <div className={`h-10 w-10 rounded-xl bg-gradient-to-br ${gradientClass} flex items-center justify-center`}>
+              <Icon className="h-5 w-5 text-white" />
+            </div>
+            <div>
+              <DialogTitle className="capitalize">{channelName}</DialogTitle>
+              <DialogDescription>Configure message channel parameters</DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto custom-scrollbar py-2">
+          <form onSubmit={handleSubmit} className="space-y-5 pr-2">
+            {fields.map((field) => (
+              <div key={field.name} className="space-y-2.5">
+                <Label
+                  htmlFor={field.name}
+                  className="text-sm font-medium text-[hsl(30,20%,12%)] flex items-center gap-2"
+                >
+                  {getFieldIcon(field.name)}
+                  {field.label}
+                </Label>
+
+                {field.type === 'boolean' && (
+                  <div className="flex items-center justify-between p-3 rounded-xl bg-[hsl(40,20%,96%)]">
+                    <span className="text-sm text-[hsl(30,8%,45%)]">
+                      {(formData[field.name] as boolean) ? t('enabled') : t('disabled')}
+                    </span>
+                    <Switch
+                      id={field.name}
+                      checked={(formData[field.name] as boolean) || false}
+                      onCheckedChange={(checked) => updateField(field.name, checked)}
+                      className="data-[state=checked]:bg-emerald-500"
+                    />
+                  </div>
+                )}
+
+                {(field.type === 'text' || field.type === 'email') && (
+                  <Input
+                    id={field.name}
+                    type={field.type}
+                    value={(formData[field.name] as string) || ''}
+                    onChange={(e) => updateField(field.name, e.target.value)}
+                    className="rounded-xl border-[hsl(40,20%,90%)] bg-[hsl(40,20%,98%)] focus:bg-white"
+                  />
+                )}
+
+                {field.type === 'password' && (
+                  <Input
+                    id={field.name}
+                    type="password"
+                    value={(formData[field.name] as string) || ''}
+                    onChange={(e) => updateField(field.name, e.target.value)}
+                    placeholder="Leave blank to keep unchanged"
+                    className="rounded-xl border-[hsl(40,20%,90%)] bg-[hsl(40,20%,98%)] focus:bg-white"
+                  />
+                )}
+
+                {field.type === 'number' && (
+                  <Input
+                    id={field.name}
+                    type="number"
+                    value={(formData[field.name] as number) || 0}
+                    onChange={(e) => updateField(field.name, parseInt(e.target.value) || 0)}
+                    className="rounded-xl border-[hsl(40,20%,90%)] bg-[hsl(40,20%,98%)] focus:bg-white"
+                  />
+                )}
+
+                {field.type === 'tags' && (
+                  <TagInput
+                    value={(formData[field.name] as string[]) || []}
+                    onChange={(tags) => updateField(field.name, tags)}
+                  />
+                )}
+              </div>
+            ))}
+
+            <DialogFooter className="pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={closeChannelModal}
+                className="rounded-xl border-[hsl(40,20%,90%)] bg-white hover:bg-[hsl(40,20%,96%)]"
+              >
+                {t('cancel')}
+              </Button>
+              <Button
+                type="submit"
+                disabled={updateChannel.isPending}
+                className="rounded-xl bg-gradient-to-r from-orange-400 to-amber-500 hover:from-orange-500 hover:to-amber-600 text-white border-0"
+              >
+                {updateChannel.isPending ? 'Saving...' : t('save')}
+              </Button>
+            </DialogFooter>
+          </form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/config/ChannelsList.tsx

@@ -0,0 +1,102 @@
+import { useConfig, useConfigMeta } from '@/hooks/useConfig';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { MessageCircle, Settings2, Bell, Mail, MessageSquare, Slack, MoreHorizontal, Plus } from 'lucide-react';
+import { useState } from 'react';
+import { ChannelForm } from './ChannelForm';
+import { useUiStore } from '@/stores/ui.store';
+import { cn } from '@/lib/utils';
+import { Tabs } from '@/components/ui/tabs-custom';
+
+const channelIcons: Record<string, typeof MessageCircle> = {
+  telegram: MessageCircle,
+  slack: Slack,
+  email: Mail,
+  webhook: Bell,
+  default: MessageSquare
+};
+
+export function ChannelsList() {
+  const { data: config } = useConfig();
+  const { data: meta } = useConfigMeta();
+  const { openChannelModal } = useUiStore();
+  const [activeTab, setActiveTab] = useState('active');
+
+  if (!config || !meta) {
+    return <div className="p-8 text-[hsl(30,8%,55%)]">Loading channels...</div>;
+  }
+
+  const tabs = [
+    { id: 'active', label: 'Enabled', count: meta.channels.filter(c => config.channels[c.name]?.enabled).length },
+    { id: 'all', label: 'All Channels', count: meta.channels.length }
+  ];
+
+  return (
+    <div className="animate-fade-in pb-20">
+      <div className="flex items-center justify-between mb-8">
+        <h2 className="text-2xl font-bold text-[hsl(30,15%,10%)]">Message Channels</h2>
+      </div>
+
+      <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
+
+      <div className="space-y-1">
+        {meta.channels.map((channel, index) => {
+          const channelConfig = config.channels[channel.name];
+          const enabled = channelConfig?.enabled || false;
+          const Icon = channelIcons[channel.name] || channelIcons.default;
+
+          return (activeTab === 'all' || enabled) && (
+            <div
+              key={channel.name}
+              className="group flex items-center gap-5 p-3 rounded-2xl hover:bg-[hsl(40,10%,96%)] transition-all cursor-pointer border border-transparent hover:border-[hsl(40,10%,94%)]"
+              onClick={() => openChannelModal(channel.name)}
+            >
+              {/* Icon */}
+              <div className={cn(
+                'h-10 w-10 flex items-center justify-center rounded-xl transition-all group-hover:scale-105',
+                enabled ? 'bg-[hsl(30,15%,10%)] text-white' : 'bg-transparent border border-[hsl(40,10%,92%)] text-[hsl(30,8%,55%)]'
+              )}>
+                <Icon className="h-5 w-5" />
+              </div>
+
+              {/* Info */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[14px] font-bold text-[hsl(30,15%,10%)] truncate">
+                    {channel.displayName || channel.name}
+                  </h3>
+                  {enabled && (
+                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]" />
+                  )}
+                </div>
+                <p className="text-[12px] text-[hsl(30,8%,55%)] truncate leading-tight mt-0.5">
+                  {enabled ? 'Channel is active and processing messages' : 'Click to configure this communication channel'}
+                </p>
+              </div>
+
+              {/* Status/Actions */}
+              <div className="flex items-center gap-4">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="rounded-xl bg-[hsl(40,10%,92%)] hover:bg-[hsl(40,10%,90%)] text-[hsl(30,10%,35%)] text-[11px] font-bold px-4 h-8"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    openChannelModal(channel.name);
+                  }}
+                >
+                  Configure
+                </Button>
+                <button className="h-8 w-8 flex items-center justify-center text-[hsl(30,8%,45%)]">
+                  <MoreHorizontal className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <ChannelForm />
+    </div>
+  );
+}

package/src/components/config/ModelConfig.tsx

@@ -0,0 +1,181 @@
+import { useState, useEffect } from 'react';
+import { useConfig, useUpdateModel } from '@/hooks/useConfig';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardTitle, CardDescription } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Loader2, Save, Sparkles, Sliders, Folder } from 'lucide-react';
+
+export function ModelConfig() {
+  const { data: config, isLoading } = useConfig();
+  const updateModel = useUpdateModel();
+
+  const [model, setModel] = useState('');
+  const [workspace, setWorkspace] = useState('');
+  const [maxTokens, setMaxTokens] = useState(8192);
+  const [temperature, setTemperature] = useState(0.7);
+
+  useEffect(() => {
+    if (config?.agents?.defaults) {
+      setModel(config.agents.defaults.model || '');
+      setWorkspace(config.agents.defaults.workspace || '');
+      setMaxTokens(config.agents.defaults.maxTokens || 8192);
+      setTemperature(config.agents.defaults.temperature || 0.7);
+    }
+  }, [config]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    updateModel.mutate({ model });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="max-w-2xl space-y-6">
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-32" />
+          <Skeleton className="h-4 w-48" />
+        </div>
+        <Card className="rounded-2xl border-[hsl(40,20%,90%)] p-6">
+          <div className="flex items-center gap-4 mb-6">
+            <Skeleton className="h-12 w-12 rounded-xl" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-24" />
+              <Skeleton className="h-3 w-32" />
+            </div>
+          </div>
+          <Skeleton className="h-4 w-20 mb-2" />
+          <Skeleton className="h-10 w-full rounded-xl" />
+        </Card>
+        <Card className="rounded-2xl border-[hsl(40,20%,90%)] p-6">
+          <Skeleton className="h-5 w-24 mb-2" />
+          <Skeleton className="h-3 w-40 mb-6" />
+          <div className="space-y-6">
+            <div>
+              <Skeleton className="h-4 w-28 mb-3" />
+              <Skeleton className="h-2 w-full rounded-full" />
+            </div>
+            <div>
+              <Skeleton className="h-4 w-32 mb-3" />
+              <Skeleton className="h-2 w-full rounded-full" />
+            </div>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl animate-fade-in pb-20">
+      <div className="mb-10">
+        <h2 className="text-2xl font-bold text-[hsl(30,15%,10%)]">Model Configuration</h2>
+        <p className="text-[14px] text-[hsl(30,8%,55%)] mt-1">Configure default AI model and behavior parameters</p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {/* Model Card */}
+          <div className="p-8 rounded-[2rem] bg-[hsl(40,10%,98%)] border border-[hsl(40,10%,94%)]">
+            <div className="flex items-center gap-4 mb-8">
+              <div className="h-10 w-10 rounded-xl bg-[hsl(30,15%,10%)] flex items-center justify-center text-white">
+                <Sparkles className="h-5 w-5" />
+              </div>
+              <h3 className="text-lg font-bold text-[hsl(30,15%,10%)]">Default Model</h3>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="model" className="text-[12px] font-bold text-[hsl(30,8%,45%)] uppercase tracking-wider">Model Name</Label>
+              <Input
+                id="model"
+                value={model}
+                onChange={(e) => setModel(e.target.value)}
+                placeholder="e.g. gpt-4, claude-3"
+                className="h-12 px-4 rounded-xl border-[hsl(40,10%,92%)] bg-white focus:ring-1 focus:ring-[hsl(30,15%,10%)] transition-all"
+              />
+            </div>
+          </div>
+
+          {/* Workspace Card */}
+          <div className="p-8 rounded-[2rem] bg-[hsl(40,10%,98%)] border border-[hsl(40,10%,94%)]">
+            <div className="flex items-center gap-4 mb-8">
+              <div className="h-10 w-10 rounded-xl bg-[hsl(30,15%,10%)] flex items-center justify-center text-white">
+                <Folder className="h-5 w-5" />
+              </div>
+              <h3 className="text-lg font-bold text-[hsl(30,15%,10%)]">Workspace</h3>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="workspace" className="text-[12px] font-bold text-[hsl(30,8%,45%)] uppercase tracking-wider">Default Path</Label>
+              <Input
+                id="workspace"
+                value={workspace}
+                onChange={(e) => setWorkspace(e.target.value)}
+                placeholder="/path/to/workspace"
+                className="h-12 px-4 rounded-xl border-[hsl(40,10%,92%)] bg-white focus:ring-1 focus:ring-[hsl(30,15%,10%)] transition-all"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Parameters Section */}
+        <div className="p-8 rounded-[2.5rem] bg-white border border-[hsl(40,10%,94%)] shadow-sm">
+          <div className="flex items-center gap-4 mb-10">
+            <div className="h-10 w-10 rounded-xl bg-[hsl(30,15%,10%)] flex items-center justify-center text-white">
+              <Sliders className="h-5 w-5" />
+            </div>
+            <h3 className="text-lg font-bold text-[hsl(30,15%,10%)]">Generation Parameters</h3>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            <div className="space-y-4">
+              <div className="flex justify-between items-center mb-2">
+                <Label className="text-[12px] font-bold text-[hsl(30,8%,45%)] uppercase tracking-wider">Max Tokens</Label>
+                <span className="text-[13px] font-bold text-[hsl(30,15%,10%)]">{maxTokens.toLocaleString()}</span>
+              </div>
+              <input
+                type="range"
+                min="1000"
+                max="32000"
+                step="1000"
+                value={maxTokens}
+                onChange={(e) => setMaxTokens(parseInt(e.target.value))}
+                className="w-full h-1 bg-[hsl(40,10%,92%)] rounded-full appearance-none cursor-pointer accent-[hsl(30,15%,10%)]"
+              />
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex justify-between items-center mb-2">
+                <Label className="text-[12px] font-bold text-[hsl(30,8%,45%)] uppercase tracking-wider">Temperature</Label>
+                <span className="text-[13px] font-bold text-[hsl(30,15%,10%)]">{temperature}</span>
+              </div>
+              <input
+                type="range"
+                min="0"
+                max="2"
+                step="0.1"
+                value={temperature}
+                onChange={(e) => setTemperature(parseFloat(e.target.value))}
+                className="w-full h-1 bg-[hsl(40,10%,92%)] rounded-full appearance-none cursor-pointer accent-[hsl(30,15%,10%)]"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-end pt-4">
+          <Button
+            type="submit"
+            disabled={updateModel.isPending}
+            className="h-12 px-8 rounded-2xl bg-[hsl(30,15%,10%)] text-white hover:bg-[hsl(30,15%,20%)] transition-all font-bold shadow-md active:scale-95"
+          >
+            {updateModel.isPending ? (
+              <Loader2 className="h-5 w-5 animate-spin" />
+            ) : (
+              'Save Changes'
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}