# チャットスクリーン

チャット画面は2人の間でやり取りされるすべてのメッセージが表示される場所です。テキストメッセージングアプリのように、画面の両側に送信者と受信者を示す2つのバブルがあります。また、現代のメッセージングアプリのように、メッセージに画像を添付する機能もあります。

## コンポーネント

### **画像とテキストコンポーネント**

<figure><img src="/files/SeBB8RAO1fSXks9OmhX4" alt="" width="171"><figcaption></figcaption></figure>

これらの2つのコンポーネントは、画面の見出しを作成し、メッセージを送信されているユーザーのフルネームとプロフィールを表示します。これらのコンポーネントはMagic Textによって制御され、前の画面で選択されたユーザーに基づいてデータベースから動的に取得されます。

### リストグループ

<figure><img src="/files/FixhQ0qLEdVGlw3BuvVC" alt="" width="563"><figcaption></figcaption></figure>

このリストの各イテレーションを構成する3つのコンポーネントがあります。つまり、リスト内の各アイテムには、すべて、いくつか、または1つもコンポーネントが表示される可能性があります。

まず、リストは**現在の会話 > メッセージ**にフィルタリングされ、**作成日時 - 古い順**でソートされます。

#### **形状とテキストコンポーネント**

リスト内には、**時々表示される**2つのテキストコンポーネントがあります。表示の可否は、データベースに表示可能なテキストがあるかどうかに基づいて制御されます。**現在のメッセージ > テキスト**が空でない場合、テキストが表示されます。

#### **Rectangle 10:**

<figure><img src="/files/9XlcEjQSrMf33zJx2goy" alt="" width="563"><figcaption></figcaption></figure>

このメッセージを含む長方形は、現在のメッセージに関連するユーザーIDが、メッセージを表示している人物のユーザーIDと等しい場合にのみ表示されます。

言い換えると、このテキストバブルはメッセージです。各メッセージは会話に属し、各会話は2人のユーザーに属します。このバブルが表示されるのは、現在の会話にユーザーが含まれ、そのユーザーがメッセージを送信した場合のみです。別の言い方をすれば、ここに表示されるメッセージは、ログインユーザーが誰かから受け取ったメッセージです。

#### Rectangle 13:

<figure><img src="/files/3zvXDyeRAMSpcK2m7FvV" alt="" width="563"><figcaption></figcaption></figure>

このメッセージを含む長方形は、現在のメッセージに関連するユーザーIDが、ログインしている人物のユーザーIDと等しい場合にのみ表示されます。

言い換えると、このバブルは、ログインしているユーザーがメッセージを送信し、そのメッセージが現在の会話に送信された場合にメッセージが表示されます。ここに表示されるメッセージは、ログインしているユーザーが送信したメッセージです。

#### **画像:**

この画像コンポーネントは、現在のメッセージ > 画像が空でない場合にのみ表示されます。つまり、データベース内のメッセージアイテムに表示する画像がある場合、画像コンポーネントが表示されます。それ以外の場合は表示されません。

### 入力コンポーネント

<figure><img src="/files/DoK8bu0A4FFLaaoEuHi9" alt="" width="563"><figcaption></figcaption></figure>

入力コンポーネントは、ログインしているユーザーが入力するメッセージテキストが入力される場所です。

### **送信ボタンアイコン**

送信ボタンアイコンは、チャットにメッセージを「送信」します。

⚡ **アイコンアクション**

入力コンポーネントに入力された情報に基づいて、現在の会話のためのメッセージを作成する「作成」アクション。

### 画像ピッカーコンポーネント

このコンポーネントを使用すると、ユーザーはデバイスからメッセージに添付する画像を選択できます。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/ja/feature-templates/user-chat/chat-screen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
