Repository: gradio-app/gradio
Pull request: Ensure `HighlightedText` with `merge_elements` loads without a value 
## Description

`merge_elements()` was trying to run on initial load even when `value` was empty, resulting in an error on load. I've added a flag to check that `value` isn't empty before we run that func. 

demo
```
import gradio as gr

with gr.Blocks() as demo:
    ht = gr.HighlightedText(
        combine_adjacent=True,
    )

demo.launch()
```

Closes: #5584 

## 🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is [an existing issue](https://github.com/gradio-app/gradio/issues) for this change. If not, please create an issue before you create this PR, unless the fix is very small. 

Not adhering to this guideline will result in the PR being closed. 

## Tests

1. PRs will only be merged if tests pass on CI. To run the tests locally, please set up [your Gradio environment locally](https://github.com/gradio-app/gradio/blob/main/CONTRIBUTING.md) and run the tests: `bash scripts/run_all_tests.sh`

2. You may need to run the linters: `bash scripts/format_backend.sh` and `bash scripts/format_frontend.sh`
  


Problem statement:
Stuck with `HighlightedText` when using `combine_adjacent` without a `value`
### Describe the bug

There is a bug in the `gr.HighlightedText` component when using the `combine_adjacent=True` parameter without providing a `value`. When these parameters are used, the application becomes stuck on "Loading...".

### Have you searched existing issues?  🔎

- [X] I have searched and found no existing issues

### Reproduction

Stuck on "Loading"

```python
import gradio as gr

with gr.Blocks() as demo:
    # stuck on "Loading"
    ht = gr.HighlightedText(
        combine_adjacent=True,
    )

demo.launch()
```

While other cases work well:

```python
import gradio as gr

with gr.Blocks() as demo:
    # Case 1: None, OK
    ht1 = gr.HighlightedText(
    )
    # Case 2: Empty string, OK
    ht2 = gr.HighlightedText(
        value="",
    )
    # Case 3: Empty string and combine_adjacent, OK
    ht3 = gr.HighlightedText(
        value="",
        combine_adjacent=True,
    )

demo.launch()
```

### Screenshot

_No response_

### Logs

```shell
No logs from python.

Logs from the browser console:


Uncaught (in promise) TypeError: s is not iterable
    at C (utils.ts:53:27)
    at Bl.e.$$.update (InteractiveHighlightedText.svelte:37:11)
    at kt (Component.js:132:5)
    at new Hl (InteractiveHighlightedText.svelte:37:40)
    at Fc (dom.js:1197:9)
    at Ql (Render.svelte:72:37)
    at kt (Component.js:136:34)
    at new Gt (Render.svelte:63:25)
    at Pt (Render.svelte:83:9)
    at Tt (Render.svelte:83:9)
```
```


### System Info

```shell
Gradio Environment Information:
------------------------------
Operating System: Darwin
gradio version: 3.44.3
gradio_client version: 0.5.0

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
altair: 5.1.1
fastapi: 0.103.1
ffmpy: 0.3.1
gradio-client==0.5.0 is not installed.
httpx: 0.25.0
huggingface-hub: 0.17.1
importlib-resources: 6.0.1
jinja2: 3.1.2
markupsafe: 2.1.3
matplotlib: 3.8.0
numpy: 1.25.2
orjson: 3.9.7
packaging: 23.1
pandas: 2.1.0
pillow: 10.0.1
pydantic: 2.3.0
pydub: 0.25.1
python-multipart: 0.0.6
pyyaml: 6.0.1
requests: 2.31.0
semantic-version: 2.10.0
typing-extensions: 4.8.0
uvicorn: 0.23.2
websockets: 11.0.3
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2023.9.1
httpx: 0.25.0
huggingface-hub: 0.17.1
packaging: 23.1
requests: 2.31.0
typing-extensions: 4.8.0
websockets: 11.0.3
```


### Severity

I can work around it

Hints from issue discussion:
I did some investigation and found that the issue may be caused by the following code in `merge_elements` function from the file [js/highlightedtext/utils.ts](https://github.com/gradio-app/gradio/blob/52f7831751b432411e109bd41add4ab286023a8e/js/highlightedtext/utils.ts#L53). Specifically, the following code does not handle the case when `value` is `undefined`:

```javascript
export function merge_elements(
	value: HighlightValueType[],
	mergeMode: "empty" | "equal"
): HighlightValueType[] { ... }
```

As a result, the for-loop can cause the application to become stuck on loading. Handling the `undefined` case for `value` should resolve this issue.
cc @hannahblair

Commit message: add changeset

Patch to review:
diff --git a/.changeset/chubby-hounds-itch.md b/.changeset/chubby-hounds-itch.md
new file mode 100644
index 0000000000..5421f67bdf
--- /dev/null
+++ b/.changeset/chubby-hounds-itch.md
@@ -0,0 +1,6 @@
+---
+"@gradio/highlightedtext": minor
+"gradio": minor
+---
+
+feat:Ensure HighlightedText with `merge_elements` loads without a value 
diff --git a/js/highlightedtext/utils.ts b/js/highlightedtext/utils.ts
index b94fd06c10..c7499a8a38 100644
--- a/js/highlightedtext/utils.ts
+++ b/js/highlightedtext/utils.ts
@@ -45,29 +45,32 @@ export function correct_color_map(
 export function merge_elements(
 	value: HighlightValueType[],
 	mergeMode: "empty" | "equal"
-): HighlightValueType[] {
-	let result: HighlightValueType[] = [];
-	let tempStr: string | null = null;
-	let tempVal: string | number | null = null;
+): HighlightValueType[] | null {
+	if (value) {
+		let result: HighlightValueType[] = [];
+		let tempStr: string | null = null;
+		let tempVal: string | number | null = null;
 
-	for (const [str, val] of value) {
-		if (
-			(mergeMode === "empty" && val === null) ||
-			(mergeMode === "equal" && tempVal === val)
-		) {
-			tempStr = tempStr ? tempStr + str : str;
-		} else {
-			if (tempStr !== null) {
-				result.push([tempStr, tempVal as string | number]);
+		for (const [str, val] of value) {
+			if (
+				(mergeMode === "empty" && val === null) ||
+				(mergeMode === "equal" && tempVal === val)
+			) {
+				tempStr = tempStr ? tempStr + str : str;
+			} else {
+				if (tempStr !== null) {
+					result.push([tempStr, tempVal as string | number]);
+				}
+				tempStr = str;
+				tempVal = val;
 			}
-			tempStr = str;
-			tempVal = val;
 		}
-	}
 
-	if (tempStr !== null) {
-		result.push([tempStr, tempVal as string | number]);
-	}
+		if (tempStr !== null) {
+			result.push([tempStr, tempVal as string | number]);
+		}
 
-	return result;
+		return result;
+	}
+	return null;
 }


Code review comments:
diff_hunk: @@ -45,29 +45,32 @@ export function correct_color_map(
 export function merge_elements(
 	value: HighlightValueType[],
 	mergeMode: "empty" | "equal"
-): HighlightValueType[] {
-	let result: HighlightValueType[] = [];
-	let tempStr: string | null = null;
-	let tempVal: string | number | null = null;
+): HighlightValueType[] | null {
+	if (value) {
path: js/highlightedtext/utils.ts
text: @user1:
Could we flip this around to do an early return  (`if (!value) return null`)?

@author:
oki yeah thats a bit cleaner

@author:
actually i've changed it such that the func never sees a null value