chore: Adds URL-based search and tab selection (#12663)

# Pull Request Template

## Description

This PR enables URL-based search and tab selection, allowing search
queries and active tabs to persist in the URL for easy sharing.

Fixes
[CW-5766](https://linear.app/chatwoot/issue/CW-5766/cannot-impersonate-an-account),
https://github.com/chatwoot/chatwoot/issues/12623

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Loom video

https://www.loom.com/share/422a1d61f3fe4278a88e352ef98d2b78?sid=35fabee7-652f-4e17-83bd-e066a3bb804c

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
This commit is contained in:
Sivin Varghese
2025-10-27 11:17:04 +05:30
committed by GitHub
parent 5891fd6f49
commit f726dc2419
3 changed files with 58 additions and 8 deletions

View File

@@ -1,10 +1,17 @@
<script setup>
import { ref, useTemplateRef, onMounted, onUnmounted } from 'vue';
import { ref, useTemplateRef, onMounted, onUnmounted, watch } from 'vue';
import { debounce } from '@chatwoot/utils';
const props = defineProps({
initialQuery: {
type: String,
default: '',
},
});
const emit = defineEmits(['search']);
const searchQuery = ref('');
const searchQuery = ref(props.initialQuery);
const isInputFocused = ref(false);
const searchInput = useTemplateRef('searchInput');
@@ -38,6 +45,16 @@ const onBlur = () => {
isInputFocused.value = false;
};
watch(
() => props.initialQuery,
newValue => {
if (searchQuery.value !== newValue) {
searchQuery.value = newValue;
}
},
{ immediate: true }
);
onMounted(() => {
searchInput.value.focus();
document.addEventListener('keydown', handler);