fix overflow of conversation name

thanks @sipc

app/src/assets/home.less

@@ -11,6 +11,7 @@
 .conversation-name {
   color: hsl(var(--text));
   font-weight: bold !important;
+  word-wrap: anywhere;
 }
 
 .web {

app/src/routes/Home.tsx

@@ -32,6 +32,7 @@ import {
 import React, { useEffect, useRef, useState } from "react";
 import {
   filterMessage,
+  extractMessage,
   formatMessage,
   mobile,
   useAnimation,
@@ -170,7 +171,7 @@ function SideBar() {
                 <AlertDialogDescription>
                   {t("conversation.remove-description")}
                   <strong className={`conversation-name`}>
-                    {filterMessage(removeConversation?.name || "")}
+                    { extractMessage(filterMessage(removeConversation?.name || "")) }
                   </strong>
                   {t("end")}
                 </AlertDialogDescription>

app/src/utils.ts

@@ -161,6 +161,10 @@ export function filterMessage(message: string): string {
   return message.replace(/```file\n\[\[.*]]\n[\s\S]*?\n```\n\n/g, "");
 }
 
+export function extractMessage(message: string, length: number = 50, flow: string = "...") {
+  return message.length > length ? message.slice(0, length) + flow : message;
+}
+
 export function useDraggableInput(
   t: any,
   toast: any,

manager/conversation/conversation.go

@@ -196,7 +196,7 @@ func (c *Conversation) HandleMessage(db *sql.DB, form *FormMessage) bool {
 		return false
 	}
 	if head {
-		c.SetName(db, form.Message)
+		c.SetName(db, utils.Extract(form.Message, 50, "..."))
 	}
 	c.SaveConversation(db)
 	return true

utils/char.go

@@ -98,3 +98,12 @@ func SplitItem(data string, sep string) []string {
 	}
 	return result
 }
+
+func Extract(data string, length int, flow string) string {
+	value := []rune(data)
+	if len(value) > length {
+		return string(value[:length]) + flow
+	} else {
+		return data
+	}
+}