Refactor content viewer components and use for multpart and request body (#333)

src-web/components/core/FormattedError.tsx

@@ -3,12 +3,14 @@ import type { ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;
+  className?: string;
 }
 
-export function FormattedError({ children }: Props) {
+export function FormattedError({ children, className }: Props) {
   return (
     <pre
       className={classNames(
+        className,
         'cursor-text select-auto',
         '[&_*]:cursor-text [&_*]:select-auto',
         'font-mono text-sm w-full bg-surface-highlight p-3 rounded',

src-web/components/core/Icon.tsx

@@ -111,7 +111,7 @@ import {
   Rows2Icon,
   SaveIcon,
   SearchIcon,
-  SendHorizonalIcon,
+  SendHorizontalIcon,
   SettingsIcon,
   ShieldAlertIcon,
   ShieldCheckIcon,
@@ -245,7 +245,7 @@ const icons = {
   rows_2: Rows2Icon,
   save: SaveIcon,
   search: SearchIcon,
-  send_horizontal: SendHorizonalIcon,
+  send_horizontal: SendHorizontalIcon,
   settings: SettingsIcon,
   shield: ShieldIcon,
   shield_check: ShieldCheckIcon,