Implement design

apps/app/public/static/locales/en_US/translation.json

@@ -509,7 +509,13 @@
     "budget_exceeded": "You have reached your usage limit for OpenAI's API. To use the Knowledge Assistant again, please add credits from the OpenAI billing page.",
     "budget_exceeded_for_growi_cloud": "You have reached your OpenAI API usage limit. To use the Knowledge Assistant again, please add credits from the GROWI.cloud admin page for Hosted users or from the OpenAI billing page for Owned users.",
     "error_message": "An error has occurred",
-    "show_error_detail": "Show error details"
+    "show_error_detail": "Show error details",
+    "preset_prompt": {
+      "summarize": "Summarize this article",
+      "replace": "Replace specific text",
+      "correct": "Correct errors in the text",
+      "create": "Create text"
+    }
   },
   "modal_ai_assistant": {
     "header": {

apps/app/public/static/locales/fr_FR/translation.json

@@ -503,7 +503,13 @@
     "budget_exceeded": "Vous avez atteint votre limite d'utilisation de l'API de l'OpenAI. Pour utiliser à nouveau l'assistant de connaissance, veuillez ajouter des crédits à partir de la page de facturation d'OpenAI.",
     "budget_exceeded_for_growi_cloud": "Vous avez atteint votre limite d'utilisation de l'API de l'OpenAI. Pour utiliser à nouveau l'assistant de connaissance, veuillez ajouter des crédits à partir de la page d'administration de GROWI.cloud pour les utilisateurs hébergés ou à partir de la page de facturation de l'OpenAI pour les utilisateurs propriétaires.",
     "error_message": "Erreur",
-    "show_error_detail": "Détails de l'exposition"
+    "show_error_detail": "Détails de l'exposition",
+    "preset_prompt": {
+      "summarize": "Résumer cet article'",
+      "replace": "Remplacer un texte spécifique",
+      "correct": "Corriger les erreurs du texte",
+      "create": "Créer un texte"
+    }
   },
   "modal_ai_assistant": {
     "header": {

apps/app/public/static/locales/ja_JP/translation.json

@@ -541,7 +541,13 @@
     "budget_exceeded": "OpenAI の API の利用上限に達しました。ナレッジアシスタントを再度利用するには OpenAI の請求ページからクレジットを追加してください。",
     "budget_exceeded_for_growi_cloud": "OpenAI の API の利用上限に達しました。ナレッジアシスタントを再度利用するには Hosted の場合は GROWI.cloud の管理画面から Owned の場合は OpenAI の請求ページからクレジットを追加してください。",
     "error_message": "エラーが発生しました",
-    "show_error_detail": "詳細を表示"
+    "show_error_detail": "詳細を表示",
+    "preset_prompt": {
+      "summarize": "この記事の要約をつくる",
+      "replace": "特定の文章を要約する",
+      "correct": "文章の誤りを修正する",
+      "create": "文章を作成する"
+    }
   },
   "modal_ai_assistant": {
     "header": {

apps/app/public/static/locales/zh_CN/translation.json

@@ -498,7 +498,13 @@
     "budget_exceeded": "您已达到 OpenAI API 的使用上限。要再次使用知识助手，请从 OpenAI 账单页面添加点数。",
     "budget_exceeded_for_growi_cloud": "您已达到 OpenAI API 使用上限。如需再次使用知识助手，请从GROWI.cloud管理页面为托管用户添加点数，或从OpenAI计费页面为自有用户添加点数。",
     "error_message": "错误",
-    "show_error_detail": "显示详情"
+    "show_error_detail": "显示详情",
+    "preset_prompt": {
+      "summarize": "为此文章创建摘要",
+      "replace": "替换特定文本",
+      "correct": "修正文本中的错误",
+      "create": "创建文本"
+    }
   },
   "modal_ai_assistant": {
     "header": {

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantSidebar/PresetPromptList.tsx

@@ -1,10 +1,35 @@
+import { useTranslation } from 'react-i18next';
+
 type Props = {
   //
 }
 
+const presetPrompts = [
+  'sidebar_ai_assistant.preset_prompt.summarize',
+  'sidebar_ai_assistant.preset_prompt.replace',
+  'sidebar_ai_assistant.preset_prompt.correct',
+  'sidebar_ai_assistant.preset_prompt.create',
+];
+
 export const PresetPromptList: React.FC<Props> = () => {
+  const { t } = useTranslation();
 
   return (
-    <>PresetPromptList</>
+    <div className="container py-4">
+      <div className="d-flex flex-column gap-3">
+        {presetPrompts.map(presetPrompt => (
+          <button
+            type="button"
+            key={presetPrompt}
+            className="btn  text-body-secondary p-3 rounded-3 border border-1"
+          >
+            <div className="d-flex align-items-center">
+              <span className="material-symbols-outlined fs-5 me-3">lightbulb</span>
+              <span className="fs-6">{t(presetPrompt)}</span>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
   );
 };