ui(frontend): show llm config

frontend/app/src/app/(main)/(admin)/llms/[id]/page.tsx

@@ -4,6 +4,7 @@ import { deleteLlm, getLlm } from '@/api/llms';
 import { AdminPageHeading } from '@/components/admin-page-heading';
 import { DangerousActionButton } from '@/components/dangerous-action-button';
 import { DateFormat } from '@/components/date-format';
+import { ConfigViewer } from '@/components/llm/config-viewer';
 import { OptionDetail } from '@/components/option-detail';
 import { Loader2Icon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
@@ -29,6 +30,7 @@ export default function Page ({ params }: { params: { id: string } }) {
           <OptionDetail title="Name" value={data?.name} />
           <OptionDetail title="Provider" value={data?.provider} />
           <OptionDetail title="Model" value={data?.model} />
+          <OptionDetail title="Config" value={data?.config && <ConfigViewer value={data.config}></ConfigViewer>} />
           <OptionDetail title="Is Default" value={data?.is_default ? 'Yes' : 'No'} valueClassName={data?.is_default ? 'text-green-500' : 'text-muted-foreground'} />
           <OptionDetail title="Created At" value={<DateFormat date={data?.created_at} />} />
           <OptionDetail title="Updated At" value={<DateFormat date={data?.updated_at} />} />

frontend/app/src/components/llm/config-viewer.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import Highlight from 'highlight.js/lib/core';
+import json from 'highlight.js/lib/languages/json';
+import { useEffect, useState } from 'react';
+import '../code-theme.scss';
+
+Highlight.registerLanguage('json', json);
+
+export function ConfigViewer ({ value: propValue }: { value: any }) {
+  const [value, setValue] = useState(() => {
+    if (propValue === undefined) {
+      return '';
+    }
+    try {
+      return JSON.stringify(propValue, undefined, 2);
+    } catch {
+      return '/// FAILED TO STRINGIFY JSON';
+    }
+  });
+
+  useEffect(() => {
+    if (propValue === undefined) {
+      return;
+    }
+    try {
+      const string = JSON.stringify(propValue, undefined, 2);
+      setValue(string);
+      const { value: result } = Highlight.highlight('json', string);
+      setValue(result);
+    } catch {
+    }
+  }, [propValue]);
+
+  return (
+    <code className='block p-2 rounded bg-accent'>
+      <pre className="whitespace-pre-wrap text-xs font-mono" dangerouslySetInnerHTML={{ __html: value }} />
+    </code>
+  );
+}