From 525b6a76773a25c7bb48761082fa93732567b138 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 15 Apr 2025 15:37:29 +0900
Subject: [PATCH] feat(frontend): chat widget

---
 CHANGELOG.md                                 |  1 +
 locales/index.d.ts                           |  4 ++
 locales/ja-JP.yml                            |  1 +
 packages/frontend/src/widgets/WidgetChat.vue | 52 ++++++++++++++++++++
 packages/frontend/src/widgets/index.ts       |  2 +
 5 files changed, 60 insertions(+)
 create mode 100644 packages/frontend/src/widgets/WidgetChat.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 90952614c9..38563da555 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 -
 
 ### Client
+- Feat: チャットウィジェットを追加
 - Feat: デッキにチャットカラムを追加
 - Fix: ログアウトした際に処理が終了しない問題を修正
 - Fix: 自動バックアップが設定されている環境でログアウト直前に設定をバックアップするように
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 5885e04847..97e66be6d7 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -9207,6 +9207,10 @@ export interface Locale extends ILocale {
          * 今日誕生日のユーザー
          */
         "birthdayFollowings": string;
+        /**
+         * チャット
+         */
+        "chat": string;
     };
     "_cw": {
         /**
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 4a334c2b41..1801c8e15b 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2421,6 +2421,7 @@ _widgets:
     chooseList: "リストを選択"
   clicker: "クリッカー"
   birthdayFollowings: "今日誕生日のユーザー"
+  chat: "チャット"
 
 _cw:
   hide: "隠す"
diff --git a/packages/frontend/src/widgets/WidgetChat.vue b/packages/frontend/src/widgets/WidgetChat.vue
new file mode 100644
index 0000000000..43b2a6e522
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetChat.vue
@@ -0,0 +1,52 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkContainer :showHeader="widgetProps.showHeader" class="mkw-chat">
+	<template #icon><i class="ti ti-users"></i></template>
+	<template #header>{{ i18n.ts._widgets.chat }}</template>
+	<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure()"><i class="ti ti-settings"></i></button></template>
+
+	<div>
+		<MkChatHistories/>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { useWidgetPropsManager } from './widget.js';
+import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
+import type { GetFormResultType } from '@/utility/form.js';
+import MkContainer from '@/components/MkContainer.vue';
+import { i18n } from '@/i18n.js';
+import MkChatHistories from '@/components/MkChatHistories.vue';
+
+const name = 'chat';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+const props = defineProps<WidgetComponentProps<WidgetProps>>();
+const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+
+const { widgetProps, configure, save } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
diff --git a/packages/frontend/src/widgets/index.ts b/packages/frontend/src/widgets/index.ts
index ea17d484c5..aea810d1ea 100644
--- a/packages/frontend/src/widgets/index.ts
+++ b/packages/frontend/src/widgets/index.ts
@@ -35,6 +35,7 @@ export default function(app: App) {
 	app.component('WidgetUserList', defineAsyncComponent(() => import('./WidgetUserList.vue')));
 	app.component('WidgetClicker', defineAsyncComponent(() => import('./WidgetClicker.vue')));
 	app.component('WidgetBirthdayFollowings', defineAsyncComponent(() => import('./WidgetBirthdayFollowings.vue')));
+	app.component('WidgetChat', defineAsyncComponent(() => import('./WidgetChat.vue')));
 }
 
 // 連合関連のウィジェット（連合無効時に隠す）
@@ -70,6 +71,7 @@ export const widgets = [
 	'userList',
 	'clicker',
 	'birthdayFollowings',
+	'chat',
 
 	...federationWidgets,
 ];