feat: supports automatic model setup and fixes rendering issues

app/src/api/v1.ts

@@ -2,6 +2,8 @@ import axios from "axios";
 import { Model, Plan } from "@/api/types.tsx";
 import { ChargeProps, nonBilling } from "@/admin/charge.ts";
 import { getErrorMessage } from "@/utils/base.ts";
+import { getModelName } from "@/routes/admin/Market.tsx";
+import { modelImages } from "@/admin/market.ts";
 
 type v1Options = {
   endpoint?: string;
@@ -88,8 +90,38 @@ export async function getApiMarket(options?: v1Options): Promise<Model[]> {
   }
 }
 
+export async function getFilledApiMarket(
+  secret?: string,
+  options?: v1Options,
+): Promise<Model[]> {
+  const data = await getApiMarket(options);
+  if (data.length > 0) return data;
+
+  const resp = await getApiModels(secret, options);
+  if (!resp.status) return [];
+
+  return resp.data.map((id) => ({
+    id,
+    default: true,
+    name: getModelName(id),
+    tag: [],
+    avatar: modelImages[0],
+    description: id,
+    free: false,
+    auth: true,
+    high_context: false,
+    price: {
+      type: nonBilling,
+      anonymous: false,
+      models: [id],
+      input: 0,
+      output: 0,
+    },
+  }));
+}
+
 export async function bindMarket(options?: v1Options): Promise<Model[]> {
-  const market = await getApiMarket(options);
+  const market = await getFilledApiMarket(undefined, options);
   const charge = await getApiCharge(options);
 
   market.forEach((item: Model) => {

app/src/components/Markdown.tsx

@@ -192,11 +192,11 @@ function MarkdownContent({
       rehypePlugins={rehypePlugins}
       className={cn("markdown-body", className)}
       children={children}
-      skipHtml={!acceptHtml}
+      skipHtml={acceptHtml}
       components={{
         p({ children }) {
           // if the format is `user quota is not enough error (model: gpt-3.5-turbo-1106, minimum quota: 0.01, your quota: -77.77)`, return special component
-          const match = children
+          const match = (children ?? "")
             .toString()
             .match(
               /user quota is not enough error \(model: (.*), minimum quota: (.*), your quota: (.*)\)/,

app/src/components/Message.tsx

@@ -271,7 +271,7 @@ function MessageContent({
       </div>
       <div className={`message-content`}>
         {message.content.length ? (
-          <Markdown children={message.content} />
+          <Markdown children={message.content} acceptHtml={false} />
         ) : message.end === true ? (
           <CircleSlash className={`h-5 w-5 m-1`} />
         ) : (

app/src/routes/admin/Market.tsx

@@ -855,7 +855,7 @@ function MarketAlert({
   );
 }
 
-function getModelName(id: string): string {
+export function getModelName(id: string): string {
   // replace all `-` to ` ` except first `-` keep it
   let begin = true;