Redmine AI Helperプラグインにインライン補完機能を追加した話

この記事は

Redmine AI Helperプラグインに新機能を追加しました。

チケットの編集フォームおよびコメント追加フォームにインライン補完機能を追加したので、紹介します。

インライン補完とは

文章をキーボードから入力している際に、AIが続きを予測して表示する機能です。
GitHub CopilotやVS Codeなどでコードを編集している時に表示される補完機能と同じようなイメージです。

• 補完内容が気に入った場合：Tabキーで確定
• 補完内容をキャンセルしたい場合：Escキーでキャンセル
• そのまま文章を入力し続けた場合：一度補完が消えるが、キー入力を止めると再度続きから補完が表示される
• 補完のオン/オフはチェックボックスで切り替え可能

コメント追加フォームでも同様に動作します。コメント追加の場合には、過去のコメントの内容も考慮して補完が行われます。

さらに、コメントを追加しようとしている立場を考慮します。例えばAさんとBさんが議論をしている場合に、Aさんがコメントを追加しようとすればAさんの立場で、Bさんがコメントを追加しようとすればBさんの立場で文章を生成し、補完が行われます。

実装のポイント

Redmineの既存コードに手を入れずに実装する必要がありました。なのでRedmineが元々用意しているチケット編集用textareaを変更せずに補完機能を追加する必要がありました。

以下のようなアプローチで実装しています。

1. ユーザーのキー入力が一定時間止まったら、textareaの内容をAIに送り、補完テキストを取得
2. Redmineが用意しているフォームのtextarea要素上に、JavaScriptで半透明のdivをピッタリ重ねてoverlay表示
3. そのdiv内に補完テキストを表示
4. TABキーが押された場合、補完テキストを確定し、textareaの内容を更新
5. ESCキーやその他のキーが押された場合、overlayしているdivを非表示にする

まとめ

強引な方法で実装しましたが、割と違和感なく動作していると思います。チケット入力が楽になると思いますので是非お試しください。

次はwikiの編集画面にも同様の機能を追加したいと考えています。