### Install npm Dependencies

Source: https://github.com/google/adk-web/blob/main/README.md

Run this command from the root of your local adk-web folder to install project dependencies.

```bash
sudo npm install
```

--------------------------------

### Run ADK Web UI

Source: https://github.com/google/adk-web/blob/main/README.md

Execute this command to start the ADK Web UI. Ensure the backend API server is running.

```bash
npm run serve --backend=http://localhost:8000
```

--------------------------------

### Run ADK API Server

Source: https://github.com/google/adk-web/blob/main/README.md

Start the ADK API server in a separate terminal. This command allows origins from the ADK Web UI.

```bash
adk api_server --allow_origins=http://localhost:4200 --host=0.0.0.0
```

--------------------------------

### Displaying Tool Use and Response Comparison

Source: https://github.com/google/adk-web/blob/main/src/app/components/content-bubble/content-bubble.component.html

Compares actual tool uses against expected tool uses, or actual final responses against expected final responses when a metric evaluation fails.

```html
{{ i18n.actualToolUsesLabel }}

{{ i18n.expectedToolUsesLabel }}
```

```html
{{ i18n.actualResponseLabel }}

{{ uiEvent.actualFinalResponse }}

{{ i18n.expectedResponseLabel }}

{{ uiEvent.expectedFinalResponse }}
```

--------------------------------

### Rendering Audio File Parts

Source: https://github.com/google/adk-web/blob/main/src/app/components/content-bubble/content-bubble.component.html

Iterates through content parts and renders audio file data if present.

```html
@for (part of uiEvent.event?.content?.parts; track part) {
@if (part.fileData && part.fileData.mimeType.startsWith('audio/')) {

}
```

--------------------------------

### Displaying Current System Instruction - Angular

Source: https://github.com/google/adk-web/blob/main/src/app/components/system-instruction-diff-dialog/system-instruction-diff-dialog.component.html

Iterates through diffRows to display the current system instruction, including line numbers and token values or the full value if no tokens are present. Use this to visualize the instruction after modification.

```html
@for (row of diffRows; track $index) {

{{ row.right.lineNumber || '' }} {{ row.right.type === 'added' ? '+' : '' }} @if (row.right.tokens && row.right.tokens.length > 0) {@for (token of row.right.tokens; track $index) {{{ token.value }}}} @else {{{ row.right.value }}}

}
```

--------------------------------

### Display Feedback Reasons

Source: https://github.com/google/adk-web/blob/main/src/app/components/message-feedback/message-feedback.component.html

Iterates over a list of reasons to display them, typically used in a feedback dialog.

```html
@for (reason of reasons(); track reason) { {{ reason }} }
```

--------------------------------

### Displaying Preceding System Instruction - Angular

Source: https://github.com/google/adk-web/blob/main/src/app/components/system-instruction-diff-dialog/system-instruction-diff-dialog.component.html

Iterates through diffRows to display the preceding system instruction, including line numbers and token values or the full value if no tokens are present. Use this to visualize the instruction before modification.

```html
@for (row of diffRows; track $index) {

{{ row.left.lineNumber || '' }} {{ row.left.type === 'removed' ? '-' : '' }} @if (row.left.tokens && row.left.tokens.length > 0) {@for (token of row.left.tokens; track $index) {{{ token.value }}}} @else {{{ row.left.value }}}

}
```

--------------------------------

### Initial Component Load State

Source: https://github.com/google/adk-web/blob/main/src/app/components/chat-panel/chat-panel.component.html

Conditionally renders content based on whether the application name is set and the session is not loading. This is typically used for the main chat interface.

```html
@if (appName != "" && !isSessionLoading) {

@if (showEvalSummary() && evalCaseResult()) {

@if (result.finalEvalStatus == 1) { PASS } @else { FAIL }

}

}

@if (appName != "" && isChatMode && !isSessionLoading) {

@if(canEditSession()) {

@if ((selectedFiles.length && appName != "") || updatedSessionState) {

}

}

}

@if (isSessionLoading) {

}
```

--------------------------------

### Displaying Tests and Actions

Source: https://github.com/google/adk-web/blob/main/src/app/components/tests-tab/tests-tab.component.html

Renders the list of tests and associated actions when tests are available. Includes test names and action buttons.

```html
@else {

Test Name

{{test.replace('.json', '')}}

Actions

play_arrow sync edit delete

}
```

--------------------------------

### File Upload and Session Update UI

Source: https://github.com/google/adk-web/blob/main/src/app/components/chat-panel/chat-panel.component.html

Renders UI elements for file uploads, including image previews and document display, along with a chip for updated session state. Includes close buttons for each file.

```html
@for (file of selectedFiles; track file; let i = $index) {

@if (file.file.type.startsWith("image/")) {

 close

}

} @else if (!file.file.type.startsWith("image/")) {

close

insert_drive_file {{ file.file.name }}

}

}

@if (updatedSessionState) {

close

{{ i18n.updatedSessionStateChipLabel }}

}
```

--------------------------------

### Conditional Rendering for Computer Use

Source: https://github.com/google/adk-web/blob/main/src/app/components/computer-action/computer-action.component.html

Renders screenshot navigation or action names based on computer use state. Includes checks for previous and next screenshots.

```html
@if (isComputerUseClick()) { @let screenshot = getPreviousComputerUseScreenshot(); @let nextScreenshot = getNextComputerUseScreenshot(); @if (screenshot || nextScreenshot) {

@if (nextScreenshot) { @if (screenshot) {

} @else {

image_not_supported No screenshot

}

{{ getActionName() }} arrow_forward

} @else {

}

} @else {

image_not_supported No screenshot

}

} @else if (isComputerUseResponse()) {

{{ functionResponse!.name }}

computer {{ getComputerUseUrl() }}

}
```

--------------------------------

### Rendering User and Bot Transcriptions

Source: https://github.com/google/adk-web/blob/main/src/app/components/content-bubble/content-bubble.component.html

Conditionally displays the input transcription for the user role and the output transcription for the bot role.

```html
{{ uiEvent.event.inputTranscription.text }}
```

```html
{{ uiEvent.event.outputTranscription.text }}
```

--------------------------------

### Displaying Code Execution Results

Source: https://github.com/google/adk-web/blob/main/src/app/components/content-bubble/content-bubble.component.html

Shows the outcome and output of a code execution, along with labels for clarity.

```html
{{ i18n.outcomeLabel }}: {{ uiEvent.codeExecutionResult.outcome }}

{{ i18n.outputLabel }}: {{ uiEvent.codeExecutionResult.output }}
```

--------------------------------

### Displaying Executable Code Snippets

Source: https://github.com/google/adk-web/blob/main/src/app/components/content-bubble/content-bubble.component.html

Renders executable code directly within the content bubble using backticks for delimitation.

```html
`{{ uiEvent.executableCode.code }}`
```

--------------------------------

### Iterate and Switch on Artifact Media Type

Source: https://github.com/google/adk-web/blob/main/src/app/components/artifact-tab/artifact-tab.component.html

Iterates through distinct artifact IDs and uses a switch statement to determine the appropriate icon or display for different media types (Image, Audio, Video, Text, Default). Includes conditional rendering for text media types based on mime type.

```html
@for (artifactId of getDistinctArtifactIds(); track artifactId; let i = $index) {

@switch (selectedArtifacts[i].mediaType) { @case (MediaType.IMAGE) { image } @case (MediaType.AUDIO) { audiotrack } @case (MediaType.VIDEO) { movie } @case (MediaType.TEXT) { @if (selectedArtifacts[i].mimeType === 'text/html') { description } @else { text_snippet } } @default { insert_drive_file } }
{{ getArtifactName(artifactId) }} open_in_new

Version: @for (artifact of getSortedArtifactsFromId(artifactId); track artifact) { {{ artifact.versionId }} }

file_download

@switch (selectedArtifacts[i].mediaType) { @case (MediaType.IMAGE) {

} @case (MediaType.AUDIO) {

} @case (MediaType.VIDEO) {

} @case (MediaType.TEXT) { @if (selectedArtifacts[i].mimeType === 'text/html') {

description Preview in new tab

} @else {

{{ getTextContent(selectedArtifacts[i].data) }}

}
}

}
```

--------------------------------

### Rendering Inline Media Based on MediaType

Source: https://github.com/google/adk-web/blob/main/src/app/components/content-bubble/content-bubble.component.html

Uses a switch statement to render different media types (image, audio, video, text) when the content is inline data and the role is 'bot'. Handles HTML text content specifically.

```html
@switch (uiEvent.inlineData.mediaType) {
@case (MediaType.IMAGE) {

}
@case (MediaType.AUDIO) {

}
@case (MediaType.VIDEO) {

}
@case (MediaType.TEXT) {
@if (uiEvent.inlineData.mimeType === 'text/html') {

description {{ uiEvent.inlineData.name }}

} @else {

{{ getTextContent(uiEvent.inlineData.data) }}

}
}
@default {

{{ uiEvent.inlineData.name }}

}
```

--------------------------------

### Display Current URL Conditionally

Source: https://github.com/google/adk-web/blob/main/src/app/components/view-image-dialog/view-image-dialog.component.html

Renders the current image URL if it exists. Otherwise, it renders nothing.

```html
@if (currentUrl) {

{{ currentUrl }}

} @else { }
```

--------------------------------

### Display Image Index and Count Conditionally

Source: https://github.com/google/adk-web/blob/main/src/app/components/view-image-dialog/view-image-dialog.component.html

Shows the current image index and total image count when there is more than one image available. Requires 'images' array and 'currentIndex' variable.

```html
@if (images.length > 1) {

{{ currentIndex + 1 }} / {{ images.length }}

}
```

--------------------------------

### Feedback Action Buttons

Source: https://github.com/google/adk-web/blob/main/src/app/components/message-feedback/message-feedback.component.html

Renders cancel and submit buttons for user feedback actions.

```html
{{ i18n.feedbackCancelButton }} {{ i18n.feedbackSubmitButton }}
```

--------------------------------

### Rendering Generic Inline Attachments

Source: https://github.com/google/adk-web/blob/main/src/app/components/content-bubble/content-bubble.component.html

Displays inline attachments, prioritizing image and video types, and falling back to a generic file icon for other MIME types.

```html
@if (uiEvent.inlineData.mimeType.startsWith("image/")) {

} @else if (uiEvent.inlineData.mimeType.startsWith("video/")) {

} @else {

insert_drive_file {{ uiEvent.inlineData.displayName }}

}
```

--------------------------------

### Display Assistant Messages

Source: https://github.com/google/adk-web/blob/main/src/app/components/builder-assistant/builder-assistant.component.html

Conditionally renders messages based on whether the assistant is ready or if there are messages to display. Handles loading states, error messages, and distinguishes between bot and user roles.

```html
@if (messages.length === 0) {

smart\_toy

### Assistant Ready

Your builder assistant is ready to help you build agents.

} @else { @for (message of messages; track message; let i = $index) {

@if (message.isLoading) {

・・・

} @else { @if (message.role === 'bot') {

Assistant

@if (message.isError) {

{{message.text}}

} @else { } } @else {

{{message.text}}

} }

}

}
```

--------------------------------

### File Attachment Input

Source: https://github.com/google/adk-web/blob/main/src/app/components/chat-panel/chat-panel.component.html

Provides an input element for attaching files, with a tooltip for uploading files and an option to update the state menu.

```html
add attach_file {{ i18n.uploadFileTooltip }} @if (!hideMoreOptionsButton()) { tune {{ i18n.updateStateMenuLabel }} }
```

--------------------------------

### Display Feedback Icons

Source: https://github.com/google/adk-web/blob/main/src/app/components/message-feedback/message-feedback.component.html

Conditionally displays filled or outlined thumb icons based on feedback direction.

```html
@if (feedbackDirection() === 'up') { thumb_up_filled } @else { thumb_up } @if (feedbackDirection() === 'down') { thumb_down_filled } @else { thumb_down }
```

--------------------------------

### Rendering Attachments in Content Bubble

Source: https://github.com/google/adk-web/blob/main/src/app/components/content-bubble/content-bubble.component.html

Iterates over attachments and displays file names, differentiating between images and other file types. Includes logic for displaying file names based on URL availability.

```html
@for (file of uiEvent.attachments; track file) {

@if (file.file.type.startsWith("image/")) {  } @if (!file.file.type.startsWith("image/")) { insert_drive_file @if (file.url) { {{ file.file.name }} } @else { {{ file.file.name }} } }
```

--------------------------------

### Rendering Chat Display Items

Source: https://github.com/google/adk-web/blob/main/src/app/components/chat-panel/chat-panel.component.html

Iterates through display items to render either chat events or branches. Handles conditional display of events based on the shouldShowEvent function.

```html
@for (item of displayItems; track item; let i = $index) { @if (item.type === 'event') { @let uiEvent = item.event; @let show = shouldShowEvent ? shouldShowEvent(uiEvent) : true; @if (uiEvent.role === 'bot' && isFirstEventForInvocation(uiEvent, item.index)) {

}
}
}
@if (item.type === 'branches') {

@for (branch of item.branches; track branch.branchId) { {{ branch.branchId }}

@for (bEvent of branch.events; track bEvent.event; let j = $index) { @let uiEvent = bEvent.event; @let show = shouldShowEvent ? shouldShowEvent(uiEvent) : true; }

}

}
```

--------------------------------

### Send/Stop Agent Response Button

Source: https://github.com/google/adk-web/blob/main/src/app/components/chat-panel/chat-panel.component.html

Conditionally renders a 'stop' button if the agent response is loading, otherwise renders a 'send' button. This controls the user's ability to interrupt or initiate an agent response.

```html
@if (isLoadingAgentResponse()) { stop } @else { send }
```

--------------------------------

### Iterate Over Menu Events in Angular

Source: https://github.com/google/adk-web/blob/main/src/app/components/event-tab/event-tab.component.html

Iterates over a list of menu events, displaying the run index and a formatted timestamp for each event. Ensure 'menuEvents' is properly defined and 'event.timestamp' is a valid date object.

```html
@for (event of menuEvents; track event.id) { Run {{ event.runIndex }} ({{ event.timestamp | date:'mediumTime' }}) }
```

--------------------------------

### Displaying Evaluation Match Score and Threshold

Source: https://github.com/google/adk-web/blob/main/src/app/components/content-bubble/content-bubble.component.html

Shows the match score and threshold for an evaluation, only if both `evalScore` and `evalThreshold` are defined.

```html
{{ i18n.matchScoreLabel }}: {{ uiEvent.evalScore }} {{ i18n.thresholdLabel }}: {{ uiEvent.evalThreshold }}
```

--------------------------------

### Iterating Through Trace Nodes

Source: https://github.com/google/adk-web/blob/main/src/app/components/trace-tab/trace-tree/trace-tree.component.html

Uses Angular's @for directive to iterate over the 'flatTree' array, rendering each node if 'shouldShowNode' returns true. Includes nested @for for indentation.

```html
@for (node of flatTree; track node) { @if (shouldShowNode(node)) {

@for (i of getArray(node.level); track $index) {

}

{{ getSpanIcon(node.span.name) }}

{{ formatSpanName(node.span.name) }}

{{ formatDuration(node.span.end_time - node.span.start_time) }}

@if (getRelativeWidth(node.span) < 10) { {{ formatDuration(node.span.end_time - node.span.start_time) }} }

} }
```

--------------------------------

### Conditional Rendering for User Feedback and Loading State

Source: https://github.com/google/adk-web/blob/main/src/app/components/event-row/event-row.component.html

Renders content when user feedback is enabled, the agent response is not loading, and the event's role is 'bot'. This is likely for displaying feedback prompts or related UI elements.

```html
@if(isUserFeedbackEnabled && !isLoadingAgentResponse && uiEvent.role === "bot") { }
```

--------------------------------

### Conditional Rendering for JSON Viewer (HTML)

Source: https://github.com/google/adk-web/blob/main/src/app/components/custom-json-viewer/custom-json-viewer.component.html

Defines the structure for displaying JSON data, handling different types and expansion states. Use this for the main display logic of JSON objects and primitives.

```html
@if (isExpandable() && depth > 0) { } @if (key !== undefined) { {{ key }} : @if (showMarkdown && hasLineBreaks(json)) { MARKDOWN }   } @if (isExpandable()) { @if (isArray(json)) { [ @if (!isExpanded) { ... ] } } @else { @if (!isExpanded) { ... } } } @else { @if (isString(json)) { "{{ json }}" } @else if (isNumber(json)) { {{ json }} } @else if (isBoolean(json)) { {{ json }} } @else if (isNull(json)) { null } @else if (isUndefined(json)) { undefined } }
```

--------------------------------

### Conditional Rendering for SVG Content

Source: https://github.com/google/adk-web/blob/main/src/app/components/view-image-dialog/view-image-dialog.component.html

A placeholder for logic related to displaying SVG content. Currently, it renders nothing.

```html
@if (isSvgContent) {

}
```

--------------------------------

### Expanded JSON Rendering (HTML)

Source: https://github.com/google/adk-web/blob/main/src/app/components/custom-json-viewer/custom-json-viewer.component.html

Handles the rendering of expanded JSON content, iterating over array items or object key-value pairs. This is used when the JSON node is set to be expanded.

```html
@if (isExpandable() && isExpanded) {

@if (isArray(json)) { @for (item of json; track $index; let last = $last) { } } @else { @for (k of getKeys(json); track k; let last = $last) { } } @if (isArray(json)) {

]

}

}
```

--------------------------------

### Conditional Rendering for Bot Role

Source: https://github.com/google/adk-web/blob/main/src/app/components/chat-avatar/chat-avatar.component.html

Renders a 'robot_2' avatar when the role is 'bot'.

```html
@if (role === 'bot') {

robot_2

} @else if (role === 'node') {

{{ initial }}

} @else if (role === 'user') {

person

}
```

--------------------------------

### Rendering Text Parts with Thoughts

Source: https://github.com/google/adk-web/blob/main/src/app/components/content-bubble/content-bubble.component.html

Iterates over text parts and conditionally renders 'thought' content if it exists and the current type is not 'thought'.

```html
@for (part of uiEvent.textParts; track part; let first = $first) {

@if (part.thought && type !== 'thought') {

thought

}
```

--------------------------------

### Displaying UI Event Information

Source: https://github.com/google/adk-web/blob/main/src/app/components/trace-tab/trace-tree/trace-tree.component.html

Conditionally renders UI event details if the 'uiEvent' variable is truthy.

```html
@if (uiEvent) {

}
```

--------------------------------

### Conditional Rendering of Evaluation Summary

Source: https://github.com/google/adk-web/blob/main/src/app/components/chat-panel/chat-panel.component.html

Renders the evaluation summary and its details only if the summary is shown and a result is available. Displays PASS or FAIL based on the final evaluation status.

```html
@if (showEvalSummary() && evalCaseResult()) { @let result = evalCaseResult();

### Evaluation Result

@if (result.finalEvalStatus == 1) { PASS } @else { FAIL }

Case ID

{{ result.evalId }}

Set ID

{{ result.setId }}

@if (result.overallEvalMetricResults?.length) {

Metrics

@for (metric of result.overallEvalMetricResults; track metric.metricName) { {{ metric.metricName }}: {{ metric.score }} }

}

}
```

--------------------------------

### Conditional Rendering for Bot Role

Source: https://github.com/google/adk-web/blob/main/src/app/components/event-row/event-row.component.html

Renders content specifically when the event's role is 'bot'. This can be a general condition before checking loading states.

```html
@if (uiEvent.role === "bot") { @for (i of indentationArray; track i) {

} }
```

--------------------------------

### Conditional Logo Display (HTML Template)

Source: https://github.com/google/adk-web/blob/main/src/app/components/custom-logo/custom-logo.component.html

This template logic renders a logo with an image and text if both imageUrl and text are present in the logo configuration. Otherwise, it displays an error message indicating invalid configuration.

```html
@let imgUrl = logoConfig?.imageUrl; @let text = logoConfig?.text; @if (imgUrl && text) { [![]({{imgUrl}}) {{text}}](/) } @else {

Invalid custom logo config. Make sure that your runtime config specifies both imgUrl and text in the logo field.

}
```

--------------------------------

### Conditional Rendering of Content Type

Source: https://github.com/google/adk-web/blob/main/src/app/components/content-bubble/content-bubble.component.html

Conditionally renders content based on the 'type' variable, excluding 'message' and 'output' types.

```html
@if (type !== 'message' && type !== 'output') {

{{ type }}

}
```

--------------------------------

### Rendering User Input with Editing Option

Source: https://github.com/google/adk-web/blob/main/src/app/components/content-bubble/content-bubble.component.html

Conditionally renders an editing interface ('close check') if the text is being edited, otherwise displays the text parts. Includes logic for rendering thoughts within text parts.

```html
@if (uiEvent.text) {
@if (uiEvent.isEditing) {

close check

} @else {
@if (uiEvent.textParts && uiEvent.textParts.length > 0) {
@for (part of uiEvent.textParts; track part; let first = $first) {

@if (part.thought && type !== 'thought') {

thought

}

}
} @else { }
}
}
```

--------------------------------

### Conditional Rendering for Request Loading State

Source: https://github.com/google/adk-web/blob/main/src/app/components/trace-tab/trace-event/trace-event.component.html

Renders content based on the loading state of the event request. Use when the request is not available or loading.

```html
@if ((uiStateService.isEventRequestResponseLoading() | async) === true) { } @else if (!llmRequest) {

Request is not available.

} @else {

}
```

--------------------------------

### Conditional Rendering for Response Loading State

Source: https://github.com/google/adk-web/blob/main/src/app/components/trace-tab/trace-event/trace-event.component.html

Renders content based on the loading state of the event response. Use when the response is not available or loading.

```html
@if ((uiStateService.isEventRequestResponseLoading() | async) === true) { } @else if (!llmResponse) {

Response is not available.

} @else {

}
```

--------------------------------

### Conditional Rendering for Bot Role and Loading State

Source: https://github.com/google/adk-web/blob/main/src/app/components/event-row/event-row.component.html

Renders content when the event's role is 'bot' and it is not currently loading. This is often used to display bot messages.

```html
@if (uiEvent.role === "bot" && !uiEvent.isLoading) { }
```

--------------------------------

### Conditional Rendering for Non-SVG Content

Source: https://github.com/google/adk-web/blob/main/src/app/components/view-image-dialog/view-image-dialog.component.html

Handles the display logic for image content that is not in SVG format. It further nests conditions for displaying content or a 'No image data' message.

```html
@if (!isSvgContent) {

@if (displayContent) {

 @if (shouldShowHighlight()) {

}

}
@if (!displayContent) {

No image data provided.

}

}
```

--------------------------------

### Conditional Rendering for User Role

Source: https://github.com/google/adk-web/blob/main/src/app/components/event-row/event-row.component.html

Renders content when the event's role is 'user'. This is typically used for displaying user-sent messages.

```html
@if (uiEvent.role === "user") { }
```

--------------------------------

### Iterating Through Tree Nodes in Trace Chart

Source: https://github.com/google/adk-web/blob/main/src/app/components/event-tab/trace-chart/trace-chart.component.html

Uses Angular's @for directive to iterate over a flat tree structure. It also includes nested loops for indentation and displays span details.

```html
@for (node of flatTree; track node) {

@for (i of getArray(node.level); track $index) {

}

{{ getSpanIcon(node.span.name) }}

{{ formatSpanName(node.span.name) }} ({{ formatDuration(node.span.end_time - node.span.start_time) }})

{{ formatDuration(node.span.end_time - node.span.start_time) }}

}
```

--------------------------------

### Conditional Graph Display in Angular

Source: https://github.com/google/adk-web/blob/main/src/app/components/event-tab/event-tab.component.html

Use this logic to conditionally render graph-related content based on availability. It handles cases where graphs are available, not available, or not yet rendered.

```html
@if (graphsAvailable()) { fullscreen }
@if (!graphsAvailable()) {

Graph is not available for this agent.

} @else if (!renderedEventGraph()) {

} @else {

}
```

--------------------------------

### Conditional Request Details Display in Angular

Source: https://github.com/google/adk-web/blob/main/src/app/components/event-tab/event-tab.component.html

Conditionally displays request details based on the selected tab and loading state. Shows a message when no LLM response is selected or displays a copy icon.

```html
@if (selectedDetailTab === 'request') { @if ((uiStateService.isEventRequestResponseLoading() | async) === true) {

} @else if (!llmRequest()) {

Select an LLM response to see request details.

} @else {

{{ copiedId === 'request' ? 'check' : 'content_copy' }}

}}
```

--------------------------------

### Conditional Response Details Display in Angular

Source: https://github.com/google/adk-web/blob/main/src/app/components/event-tab/event-tab.component.html

Conditionally displays response details based on the selected tab and loading state. Shows a message when no LLM response is selected or displays a copy icon.

```html
@if (selectedDetailTab === 'response') { @if ((uiStateService.isEventRequestResponseLoading() | async) === true) {

} @else if (!llmResponse()) {

Select an LLM response to see response details.

} @else {

{{ copiedId === 'response' ? 'check' : 'content_copy' }}

}}
```

--------------------------------

### Conditional Rendering for Response Status

Source: https://github.com/google/adk-web/blob/main/src/app/components/long-running-response/long-running-response.html

This snippet shows the main conditional logic for rendering content based on the response status. It checks if the response has not been sent or is not currently sending.

```html
@if (functionCall.responseStatus !== 'sent' && functionCall.responseStatus !== 'sending') {

@if (hasMessage()) {

@if (formFields.length > 0) {

Form

JSON

Payload

Schema

}

@if (isConfirmationRequest) {

{{functionCall.args?.toolConfirmation?.hint}}

Payload

 Confirmed

Submit

} @else if (formFields.length > 0) {

@if (activeTab === 'form') {

@for (field of formFields; track field.key) {

{{field.title}}@if(field.required){ \*

@if (field.type === 'boolean') {  @if (field.description) {

{{field.description}}

} } @else { @if (field.type === 'number' || field.type === 'integer') {  } @else {  } @if (field.description) {

{{field.description}}

} }

}

Submit

} @else if (activeTab === 'json') {

Submit

} @else if (activeTab === 'payload') {

{{getPayloadJson()}}

} @else if (activeTab === 'response schema') {

{{getResponseSchemaJson()}}

}

} @else {  send }

}

} @else {

@if (formFields.length > 0) {

Form

JSON

Payload

Schema

}

@if (isConfirmationRequest) {

{{functionCall.args?.toolConfirmation?.hint}}

Payload

 Confirmed

Submit

} @else if (formFields.length > 0) {

@if (activeTab === 'form') {

@for (field of formFields; track field.key) {

{{field.title}}@if(field.required){ \*

@if (field.type === 'boolean') {  @if (field.description) {

{{field.description}}

} } @else { @if (field.type === 'number' || field.type === 'integer') {  } @else {  } @if (field.description) {

{{field.description}}

} }

}

Submit

} @else if (activeTab === 'json') {

Submit

} @else if (activeTab === 'payload') {

{{getPayloadJson()}}

} @else if (activeTab === 'response schema') {

{{getResponseSchemaJson()}}

}

} @else {  send }

}

}
```

--------------------------------

### Conditional Rendering for Rendered Event Graph

Source: https://github.com/google/adk-web/blob/main/src/app/components/trace-tab/trace-event/trace-event.component.html

Conditionally renders content if the event graph has been rendered. Use to display graph-related elements.

```html
@if (renderedEventGraph) {

}
```

--------------------------------

### Conditional Rendering for No Tests Found

Source: https://github.com/google/adk-web/blob/main/src/app/components/tests-tab/tests-tab.component.html

Displays a message when no tests are found for the agent. This uses Angular's structural directive @if.

```html
@if (dataSource.data.length === 0) {

assignment_late No tests found for this agent.

}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.