Feat: add German translations for all agent templates and optimized line breaks for template titles (#10643)

### What does this PR solve?
German translation for all agent template and optimizing line breaks in
the title for the new translation.

### Type of change
- [x] New Feature (non-breaking change which adds functionality)

web/src/interfaces/database/flow.ts

@@ -52,12 +52,14 @@ export interface IFlowTemplate {
   description: {
     en: string;
     zh: string;
+    de: string;
   };
   dsl: DSL;
   id: string;
   title: {
     en: string;
     zh: string;
+    de: string;
   };
   update_date: string;
   update_time: number;

web/src/pages/agents/template-card.tsx

@@ -20,7 +20,7 @@ export function TemplateCard({ data, showModal }: IProps) {
 
   const language = useMemo(() => {
     return i18n.language || 'en';
-  }, []) as 'en' | 'zh';
+  }, []) as 'en' | 'zh' | 'de';
 
   return (
     <Card className="border-colors-outline-neutral-standard group relative min-h-40">
@@ -31,9 +31,9 @@ export function TemplateCard({ data, showModal }: IProps) {
             avatar={data.avatar ? data.avatar : 'https://github.com/shadcn.png'}
             name={data?.title[language] || 'CN'}
           ></RAGFlowAvatar>
-          <div className="text-[18px] font-bold ">{data?.title[language]}</div>
+          <div className="text-[18px] font-bold break-words hyphens-auto overflow-hidden"lang={language}>{data?.title[language]}</div>
         </div>
-        <p className="break-words">{data?.description[language]}</p>
+        <p className="break-words hypens-auto"lang={language}>{data?.description[language]}</p>
         <div className="group-hover:bg-gradient-to-t from-black/70 from-10% via-black/0 via-50% to-black/0 w-full h-full group-hover:block absolute top-0 left-0 hidden rounded-xl">
           <Button
             variant="default"