• フロントエンドの実装後で良い。優先順位は低め
• next-pwaというモジュールを使用する
• next.config.jsでキャッシュの設定を行う
• manifest.jsonを追加し、Headに追加する
• 参考: https://dev.classmethod.jp/articles/next-js-pwa/

要望の概要

各チャットでタイトルを編集できるようにしたい

要望の動機

現状チャットタイトルは編集できず、ダッシュボードに表示されるチャットタイトルは、アクセスしたURLに依存している。
（例えば/chat/chat1にアクセスしてチャットを行い、ダッシュボートからチャット履歴を閲覧すると、チャットタイトル: chat1となっている。）

要望の提案

• チャットタイトルを編集可能にする
• チャットタイトルをデータベースに保存する
• チャットタイトルが変更されると、データベースの値も更新する

参考

• Editable - Chakra UI

• #5
• Figmaを使ってデザインしていく
• アイデアは既存の英会話アプリ、アプリのチャットUIを参考にする
• 以下に必要な機能を考えていく

要望の概要

一度音声入力（または文字入力）をしたあとにでも追加で音声入力をできるようにしたい。

要望の動機

音声入力は一度、話すのを辞めると止まってしまう。
もう一回音声入力のボタンを押したら再び音声入力をできるようになれば良いなと

要望の提案

• 音声入力のボタンと送信ボタンを分ける。
• 再び音声入力を行う場合は、inputの値(文字列)の末尾に新しく受け取った文字列を展開するようにする。

タスク

イメージとしては/chat/f98h4aqlohviluahk的なページに移動するようにしたい、ということ

• randomstringパッケージを使用する
• 新しいチャットに移動するリンクに、生成したslugを割り当てる

要望の概要

何らかの方法でエラーをユーザに表示させたい

要望の動機

まれに、メッセージを送ってもChatGPTからの返信が返ってこないことがある。

要望の提案

• ChatGPTからのメッセージとしてエラーメッセージを返すようにするとか

• エラーコードを取得（Too Many Requestsがよく出る）してコードに合わせてエラーメッセージを表示させる
  

• LINEのチャットを参考にする
• テキストが未入力時、マイクボタンを有効化する
• テキストが入力されると、マイクボタンを送信ボタンに差し替える

要望の概要

音声入力で英会話できるようになりたい

要望の動機

• そもそも音声入力が完成形のため
• テキスト入力より音声入力のほうが入力速度が速いため

要望の提案

• 音声入力できるようにする
  • 音声入力の実装方法を考える
• 入力方式を入れ替えれるようにする
  • ボタンの実装
  • ボタンクリック時に、テキスト・音声入力を切り替える
  • #43
  • #38
  • #41

参考

• react-speech-recognition - npm
• react-speech-recognition/docs/API.md at 6b28cf1d18a9778d80c49b448f015549fdb6f2f8 · JamesBrill/react-speech-recognition

要望の概要

ログイン情報やチャット履歴などユーザーデータをどう扱うか話し合う

要望の動機

アプリで使用するユーザーデータを漏洩・悪用する予定はないが、どのように扱うか明記・考えるべき

要望の提案

• データをどのように扱うべきか
  • 自分たちでデータを閲覧できるようにするべきか
  • 普通にデータベースに保存してもいいのか
  • データを暗号化するべきか（暗号できるのか）
• プライバシーポリシーについて
  • プライバシーポリシーの記入事項
  • どのようなことを遵守すべきか

要望の概要

Chat画面でSubmitを押下した後に自動的に入力欄にカーソルがいくようにしたい

要望の動機

入力の操作性を上げたい

要望の提案

• イベント時の動作を変更する？？

要望の概要

チャット継続日数の表示・モチベ管理の機能を追加したい

要望の動機

アプリケーションを長く・楽しみながら使ってもらえるように、遊び要素を入れたかったため。
便利なアプリを開発しても、本機能とは別の楽しみも必要だと考えた。

要望の提案

• チャット継続日数の表示
  • アニメーションがあるとUXが向上する
  • GitHubのcontributionsのように表示する : カレンダー形式で表示する : どちらか選べる（今後のアップデートで追加でも良いかも）
• 各日のチャット履歴の表示
• バッジ機能
• ランキング機能
  • ユーザー情報などを追加する必要があるため優先度低い
• @QwerTayu その他あれば

バグの概要

メッセージを送信する際に改行を含ませてもそれがチャット欄に反映されない。

バグの再現手順

1. 改行を含むメッセージを送信する。

期待する動作

No response

実際の動作

改行してるのに、改行されずに１行のメッセとして表示される。

環境情報

No response

タスク

• タスクを立てる
• 今の状態だと、文字部分をホバーしないとクリックできない。
• 四角の色が変わってるところホバーしたらリンクを踏めるようにしたい
• 右側の編集・削除の部分は除いて

要望する機能

• チャットを右クリックしたときに表示されるナビゲーションより操作
• ただし現状チャットの文章を丸ごと選択している状態のため、単語ごとに選ぶ必要がある
• 案1
  • 単語を選択した状態で右クリック
  • ナビゲーションの辞書から選択した単語の意味を調べる
• 案2
  • 右クリックで辞書を選択する
  • ポップアップが表示される
  • ポップアップ内で文章が単語ごとにマーキングされて表示される
  • 単語をタップすると辞書によってその単語を調べられる

実装方法について

• WordsAPIを使用する
• 1日当たり、2500回までリクエストできるらしい
• WordsAPIを使用してアプリ内で辞書を引くか、Weblioなどのサイトの該当単語のページに飛ばすか

• ChakraのDrawerを利用する
  • Drawerの中に言語選択用のセレクトを入れる
• とりあえず配置していたハンバーガーメニューを削除し、他のアイコンに差し替える

要望の概要

トーク中に新しく知ったフレーズを記録したい

要望の動機

トーク中に新しく知った単語とかは、記録しないとすぐに忘れてしまう...記録できる機能を追加したいなと思う。
自動もしくは手動で記録していけるようにしたい。

要望の提案

• 手動で記録できる機能を作る
  • トーク中のメッセージを長押しで記録できるようにする。（ラベルと日本語と英語と注釈を設定する）
• 自動で記録できる機能を作る
  • AIに「言い方がわからない」と聞いたとき、AIが英文を訂正した時などに、記録する。（ラベルと日本語と英語と注釈の設定を自動も行う）
• ホームのメニューに「覚える」みたいなタブを追加して、そこから記録したフレーズの一覧を表示できるようにする。

要望の概要

チャット開始時にユーザからではなくてChatGPTからチャットを開始する

要望の動機

空から話始めるよりも、デフォルトのやつがあったほうが英会話っぽい

要望の提案

• 白紙からチャットを進めるよりもベースのメッセージを表示させたほうが良さそう

Hello! What would you like to talk about today?
Recommend:
- Food
- Sports
- Sightseeing
- country

バグの概要

ChatGPTの応答が来る前に文字を入力していると、応答が来た際に入力内容が消えてしまうバグ

バグの再現手順

1. なにかチャットを送ります。
2. ChatGPTの返信が来る前にチャット入力欄にテキストを入力します。
3. ChatGPTの返信が返ってきたときに、入力内容が消えてしまいます。

期待する動作

ChatGPTの応答があってもそれ以前に入力欄に入力していた文字は記憶されていてほしい

実際の動作

これは、バグではないのかもしれない。

環境情報

No response

タスク

• inputからtextareaに変更する。
• #50
• textarea内で「Shift+Enter」「Enter」で改行できるようにする。

バグの概要

スマホ等で仮想キーボード展開時に、chat画面がキーボード展開スペースに合わせて縮小しないバグを直したい

バグの再現手順

1. スマホでPWAを立ち上げ
2. Chatで入力欄をタップ→キーボードが展開する
   

期待する動作

キーボードが展開したのに合わせてChat画面のheightが縮小して表示される

実際の動作

Chat画面の上部もしくは下部が隠れて見えなくなる

環境情報

No response

タスク

• useEffectが必要か検討する
  • もしpropsやstateを受け取っていれば必要ない
• 必要に応じてコードの削除、修正を行う

タスク

• チャットタイトルが決まっていないときはUntitledを表示するように変更する
• チャットタイトル下に最終更新日を表示
• チャットにてチャットタイトルを表示

タスク

• タスクを立てる

既存のコードを消して整理する

要望の概要

ChatGPTと話せるようにしよう

要望の動機

8/18の進捗報告会までに実装したい。
これを実装しないと始まらない...

要望の提案

• ChatGPT apiの実装方法を調べる
• ChatGPTのapiを使用できるように申請
• apiを読み込み
• 表示させる
• 実装

@hengin-eer 適当です...詳しくおなしゃす

要望の概要

チャットをシステムとユーザーでそれぞれ区別したい

要望の動機

• #34 問題があるためこちらを先に修正する必要がある
• 現在のUIではチャットを正しく表示できていても、どちら側のチャットメッセージなのか判断が難しい
• 既存のチャットアプリにはアイコンやメッセージの配置場所などで、区別がしやすいUIになっている

要望の提案

• #34 を修正する
• これを修正ののち、チャットがGPTかユーザーかで表示を変える
  • 具体的にはユーザーチャットは右側に、システムチャットは左側に配置する
  • デザインも微修正

要望の概要

機能紹介やログインリンクなどが存在するトップページ（プロモーションページ）を追加したい

要望の動機

それっぽくするため

要望の提案

• index.jsをトップページとして編集
  • ダミーのログインリンクを追加
  • アプリの紹介欄

タスク

• #54
  • ログインの認証方法を検討
• ユーザーデータの保存
• ユーザーごとチャットデータの保存

参考

• https://zenn.dev/rabee/articles/firebase-create-user-docment-in-firestore-at-login
• https://deecode.net/?p=1330

タスク

• Googleアカウントでのログイン機能実装
• ログイン後、/dashboardにリダイレクト
• ログアウト後、トップページにリダイレクト
• ログインしていないときに/dashboard, /chat/*等にアクセスしたとき、トップページにリダイレクト

追記

• リダイレクトを実装できたが、useEffectを使っているため、ユーザー体験が悪い
• 後々実装方法を変更するかも

参考

• Nextjs,TypeScriptでFirebaseを使ってGoogleログイン機能を実装！
• Next.jsでリダイレクトを行う方法をまとめてみた
• Next.jsでページ共通の処理をする（useEffectを使う例）

@QwerTayu

概要

• とりあえず形を作る
• pagesディレクトリの直下にappディレクトリ、その中にchat.jsxを追加

追加機能

• ページは100vh, 100vwで固定
• チャット表示部分
  • 縦スクロールできるように
• テキスト入力フォーム
• 音声入力ボタン
  • ブラウザの音声入力を使用
• とりあえずデータを保持してブラウザにチャット履歴を残すまでがゴール

要望の概要

ダッシュボードにて様々な設定をできるようにしたい

要望の動機

そもそもチャットやユーザーに関する設定を行えるようにしたい。
チャットの設定はチャットページからも変更できるが、頻繁に変更しないのであれば設定ページから変更出来たほうが楽。

要望の提案

以下のオプションを編集できるようにする

• 処理実装済み
  • チャットでの音声入力言語の選択
• 処理未実装・検討中
  • ユーザープロフィール
  • アプリ内での使用言語
  • チャットボットのキャラクター選択
  • チャットデータを保存するか否か

要望の概要

ページを多言語対応したい(第一弾として英語対応)

要望の動機

アプリで世界中の言語に対応していると言うならば、ページも多言語対応すべき

参考

https://zenn.dev/steelydylan/articles/nextjs-with-i18n

要望の提案

後で編集する

バグの概要

同上

バグの再現手順

1. ダッシュボードページでログアウトボタンをクリック
2. ログインページにリダイレクトされる

期待する動作

1. ダッシュボードページでログアウトボタンをクリック
2. トップページにリダイレクトされる

実際の動作

再現手順と同じ

環境情報

No response

タスク

• タスクを立てる
• 保存
  • ロジックを考える
    • 右クリックしたらモーダルを展開する。（その際に自動的に対象のメッセージの全文を挿入する）
    • ユーザが「保存するフレーズ」と「説明」を編集できるようにする
  • 保存した文章・単語を表示するページの作成も必要
• コピー機能
  • クリップボードにテキストをコピーする
• 翻訳機能 #40
  • テキストを選んだ言語で翻訳する
  • 言語選択も可能にする
  • 右クリックしたらサイドメニューが開き、その時のメッセージが挿入される。
• 翻訳と辞書機能は分けた方が良いかもしれない

要望の概要

アプリのトップページを作りたい

要望の動機

現状、アプリのトップページは空白のページとなっており以下の問題がある

• なんのアプリなのか、どんなアプリなのか分からず、ユーザーに混乱を与える
• チャット画面に移動するには直接URLを打ち込む必要があるためちょー不便
• そもそもトップページが空白のアプリ・サイトは言語道断！！

要望の提案

• アプリのヒーローエリア（ドでかい画像やタイトルなど、キャッチコピー）
• 各ページへのリンク
• プロモーション部分
  • ページ構造を確定する

タスク

• グローバルステート化したいので_app.jsxで取得するように変更する

• githubディレクトリ配下にYAML, Markdownファイルを作成することで、テンプレート作成が可能
• @hengin-eer のレポジトリからとってくる

要望の概要

対話機能を作ろう

要望の動機

8/15くらいまでには作りたい

要望の提案

• ChatGPT APIの利用初期設定
• APIの読み込み
• メッセの表示？

要望の概要

新しくメッセが増えたときに、トークの一番下に移動するようにしたい。

要望の動機

メッセが増えるたびに下にスクロールするのは使いにくい

要望の提案

• メッセが増えたことというイベント関数を受け取って、一番下にスクロールさせる??

タスク

• タスクを立てる
• onToggleからonOpen, onCloseの処理に変更する
• 画面全体を取得し、いずれかがクリックされたらメニューを非表示

要望の概要

チャットデータ等をデータベースに保存したい

要望の動機

• ユーザーごとにチャット履歴を参照したい
• #10 の実装時に単語を保存する必要があるため

要望の提案

• Firebaseを利用する
• チャット履歴を保存する

バグの概要

ユーザーのチャットがGPTに上書きされる

バグの再現手順

1. チャット画面にアクセス
2. テキストフォームに入力後、サブミット

期待する動作

1. ユーザーがテキストをサブミット
2. フォームが初期化されるとともに、ユーザーのチャットが表示される
3. GPTと通信
4. GPTのチャットがユーザーチャットの下に生成される

実際の動作

1. ユーザーがテキストをサブミット
2. ユーザーのチャットが表示される
3. フォームにユーザーのテキストが残されたまま
4. GPTのチャットが返ってくる
5. ユーザーチャットがGPTのチャットに上書きされる
6. フォームが初期化される

環境情報

No response

タスク

• サイドバーをボトムナビに変換する
• homeリンクの削除（リダイレクトされてアクセスできない為）
• 各機能のアイコン追加（処理は実装しない）

要望の概要

タイトルの通り

要望の動機

今まではuseStateを用いてpropsのバケツリレーを頑張ってきたが、コードの構造が複雑になりがち。
バケツリレーを考慮してコードを変更する必要があるため、しんどい。
バケツリレーのせいでコードが再利用できないこともある。

要望の提案

• Recoilの導入
• Atomという、ステートを管理する場所を作る
• ダッシュボードの実装中に必要性を感じたため、とりあえずダッシュボードで使用するステートを優先して置き替える

参考

• 【Recoil入門】１からReactの状態管理ライブラリのRecoilを学んでみよう - YouTube

要望の概要

PWA時のトップページとなる、ダッシュボードのページを作成する。

要望の動機

アプリ機能の幅を上げる前準備

要望の提案

• dashboard.jsをダッシュボードページとして追加
  • Chat画面への遷移リンク
  • そのほか機能にアクセスするためのダミーリンクを内含したタブ

バグの概要

同上

バグの再現手順

1. ダッシュボードにてチャットタイトルを編集する
2. そのチャットにアクセス
3. メッセージを送信する（チャットデータの内、idとupdatedAtが更新される）
4. ダッシュボードに戻る
5. チャットタイトルがidになっている（チャットタイトルが""に初期化されてしまった）

期待する動作

以前設定したチャットタイトルの値が維持されている
例: 上記の手順1でチャットタイトルを"Hello Chat World"と設定すると、手順5でも"Hello Chat World"と表示されている

実際の動作

チャット後にチャットタイトルが初期化される

環境情報

No response

タスク

• ダッシュボートのチャット履歴をTrashボタンで削除できるようにする
• 削除時に確認を求めるUIの表示（popup? toastでn秒以内は削除を取り消せる？）

参考

• 下のリンクを参考に実装する言語を検討する
• html - What are the supported languages for Web Speech API in HTML5? - Stack Overflow
• 言語コード | 資料
• https://github.com/JamesBrill/react-speech-recognition/blob/HEAD/docs/API.md#language-string