feat: Advanced Search Backend (#12917)
## Description
Implements comprehensive search functionality with advanced filtering
capabilities for Chatwoot (Linear: CW-5956).
This PR adds:
1. **Time-based filtering** for contacts and conversations (SQL-based
search)
2. **Advanced message search** with multiple filters
(OpenSearch/Elasticsearch-based)
- **`from` filter**: Filter messages by sender (format: `contact:42` or
`agent:5`)
- **`inbox_id` filter**: Filter messages by specific inbox
- **Time range filters**: Filter messages using `since` and `until`
parameters (Unix timestamps in seconds)
- **90-day limit enforcement**: Automatically limits searches to the
last 90 days to prevent performance issues
The implementation extends the existing `Enterprise::SearchService`
module for advanced features and adds time filtering to the base
`SearchService` for SQL-based searches.
## API Documentation
### Base URL
All search endpoints follow this pattern:
```
GET /api/v1/accounts/{account_id}/search/{resource}
```
### Authentication
All requests require authentication headers:
```
api_access_token: YOUR_ACCESS_TOKEN
```
---
## 1. Search All Resources
**Endpoint:** `GET /api/v1/accounts/{account_id}/search`
Returns results from all searchable resources (contacts, conversations,
messages, articles).
### Parameters
| Parameter | Type | Description | Required |
|-----------|------|-------------|----------|
| `q` | string | Search query | Yes |
| `page` | integer | Page number (15 items per page) | No |
| `since` | integer | Unix timestamp (contacts/conversations only) | No
|
| `until` | integer | Unix timestamp (contacts/conversations only) | No
|
### Example Request
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search?q=customer" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
### Example Response
```json
{
"payload": {
"contacts": [...],
"conversations": [...],
"messages": [...],
"articles": [...]
}
}
```
---
## 2. Search Contacts
**Endpoint:** `GET /api/v1/accounts/{account_id}/search/contacts`
Search contacts by name, email, phone number, or identifier with
optional time filtering.
### Parameters
| Parameter | Type | Description | Required |
|-----------|------|-------------|----------|
| `q` | string | Search query | Yes |
| `page` | integer | Page number (15 items per page) | No |
| `since` | integer | Unix timestamp - filter by last_activity_at | No |
| `until` | integer | Unix timestamp - filter by last_activity_at | No |
### Example Requests
**Basic search:**
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/contacts?q=john" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search contacts active in the last 7 days:**
```bash
SINCE=$(date -v-7d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/contacts?q=john&since=${SINCE}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search contacts active between 30 and 7 days ago:**
```bash
SINCE=$(date -v-30d +%s)
UNTIL=$(date -v-7d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/contacts?q=john&since=${SINCE}&until=${UNTIL}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
### Example Response
```json
{
"payload": {
"contacts": [
{
"id": 42,
"email": "john@example.com",
"name": "John Doe",
"phone_number": "+1234567890",
"identifier": "user_123",
"additional_attributes": {},
"created_at": 1701234567
}
]
}
}
```
---
## 3. Search Conversations
**Endpoint:** `GET /api/v1/accounts/{account_id}/search/conversations`
Search conversations by display ID, contact name, email, phone number,
or identifier with optional time filtering.
### Parameters
| Parameter | Type | Description | Required |
|-----------|------|-------------|----------|
| `q` | string | Search query | Yes |
| `page` | integer | Page number (15 items per page) | No |
| `since` | integer | Unix timestamp - filter by last_activity_at | No |
| `until` | integer | Unix timestamp - filter by last_activity_at | No |
### Example Requests
**Basic search:**
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/conversations?q=billing" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search conversations active in the last 24 hours:**
```bash
SINCE=$(date -v-1d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/conversations?q=billing&since=${SINCE}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search conversations from last month:**
```bash
SINCE=$(date -v-30d +%s)
UNTIL=$(date +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/conversations?q=billing&since=${SINCE}&until=${UNTIL}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
### Example Response
```json
{
"payload": {
"conversations": [
{
"id": 123,
"display_id": 45,
"inbox_id": 1,
"status": "open",
"messages": [...],
"meta": {...}
}
]
}
}
```
---
## 4. Search Messages (Advanced)
**Endpoint:** `GET /api/v1/accounts/{account_id}/search/messages`
Advanced message search with multiple filters powered by
OpenSearch/Elasticsearch.
### Prerequisites
- OpenSearch/Elasticsearch must be running (`OPENSEARCH_URL` env var
configured)
- Account must have `advanced_search` feature flag enabled
- Messages must be indexed in OpenSearch
### Parameters
| Parameter | Type | Description | Required |
|-----------|------|-------------|----------|
| `q` | string | Search query | Yes |
| `page` | integer | Page number (15 items per page) | No |
| `from` | string | Filter by sender: `contact:{id}` or `agent:{id}` |
No |
| `inbox_id` | integer | Filter by specific inbox ID | No |
| `since` | integer | Unix timestamp - searches from this time (max 90
days ago) | No |
| `until` | integer | Unix timestamp - searches until this time | No |
### Important Notes
- **90-Day Limit**: If `since` is not provided, searches default to the
last 90 days
- If `since` exceeds 90 days, returns `422` error: "Search is limited to
the last 90 days"
- All time filters use message `created_at` timestamp
### Example Requests
**Basic message search:**
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search messages from a specific contact:**
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&from=contact:42" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search messages from a specific agent:**
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&from=agent:5" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search messages in a specific inbox:**
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&inbox_id=3" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search messages from the last 7 days:**
```bash
SINCE=$(date -v-7d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&since=${SINCE}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search messages between specific dates:**
```bash
SINCE=$(date -v-30d +%s)
UNTIL=$(date -v-7d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&since=${SINCE}&until=${UNTIL}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Combine all filters:**
```bash
SINCE=$(date -v-14d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&from=contact:42&inbox_id=3&since=${SINCE}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Attempt to search beyond 90 days (returns error):**
```bash
SINCE=$(date -v-120d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&since=${SINCE}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
### Example Response (Success)
```json
{
"payload": {
"messages": [
{
"id": 789,
"content": "I need a refund for my purchase",
"message_type": "incoming",
"created_at": 1701234567,
"conversation_id": 123,
"inbox_id": 3,
"sender": {
"id": 42,
"type": "contact"
}
}
]
}
}
```
### Example Response (90-day limit exceeded)
```json
{
"error": "Search is limited to the last 90 days"
}
```
**Status Code:** `422 Unprocessable Entity`
---
## 5. Search Articles
**Endpoint:** `GET /api/v1/accounts/{account_id}/search/articles`
Search help center articles by title or content.
### Parameters
| Parameter | Type | Description | Required |
|-----------|------|-------------|----------|
| `q` | string | Search query | Yes |
| `page` | integer | Page number (15 items per page) | No |
### Example Request
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/articles?q=installation" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
### Example Response
```json
{
"payload": {
"articles": [
{
"id": 456,
"title": "Installation Guide",
"slug": "installation-guide",
"portal_slug": "help",
"account_id": 1,
"category_name": "Getting Started",
"status": "published",
"updated_at": 1701234567
}
]
}
}
```
---
## Technical Implementation
### SQL-Based Search (Contacts, Conversations, Articles)
- Uses PostgreSQL `ILIKE` queries by default
- Optional GIN index support via `search_with_gin` feature flag for
better performance
- Time filtering uses `last_activity_at` for contacts/conversations
- Returns paginated results (15 per page)
### Advanced Search (Messages)
- Powered by OpenSearch/Elasticsearch via Searchkick gem
- Requires `OPENSEARCH_URL` environment variable
- Requires `advanced_search` account feature flag
- Enforces 90-day lookback limit via
`Limits::MESSAGE_SEARCH_TIME_RANGE_LIMIT_DAYS`
- Validates inbox access permissions before filtering
- Returns paginated results (15 per page)
---
## Type of change
- [x] New feature (non-breaking change which adds functionality)
- [x] Enhancement (improves existing functionality)
---
## How Has This Been Tested?
### Unit Tests
- **Contact Search Tests**: 3 new test cases for time filtering
(`since`, `until`, combined)
- **Conversation Search Tests**: 3 new test cases for time filtering
- **Message Search Tests**: 10+ test cases covering:
- Individual filters (`from`, `inbox_id`, time range)
- Combined filters
- Permission validation for inbox access
- Feature flag checks
- 90-day limit enforcement
- Error handling for exceeded time limits
### Test Commands
```bash
# Run all search controller tests
bundle exec rspec spec/controllers/api/v1/accounts/search_controller_spec.rb
# Run search service tests (includes enterprise specs)
bundle exec rspec spec/services/search_service_spec.rb
```
### Manual Testing Setup
A rake task is provided to create 50,000 test messages across multiple
inboxes:
```bash
# 1. Create test data
bundle exec rake search:setup_test_data
# 2. Start OpenSearch
mise elasticsearch-start
# 3. Reindex messages
rails runner "Message.search_index.import Message.all"
# 4. Enable feature flag
rails runner "Account.first.enable_features('advanced_search')"
# 5. Test via API or Rails console
```
---
## 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
- [x] I have made corresponding changes to the documentation (this PR
description)
- [x] My changes generate no new warnings
- [x] 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
---
## Additional Notes
### Requirements
- **OpenSearch/Elasticsearch**: Required for advanced message search
- Set `OPENSEARCH_URL` environment variable
- Example: `export OPENSEARCH_URL=http://localhost:9200`
- **Feature Flags**:
- `advanced_search`: Account-level flag for message advanced search
- `search_with_gin` (optional): Account-level flag for GIN-based SQL
search
### Performance Considerations
- 90-day limit prevents expensive long-range queries on large datasets
- GIN indexes recommended for high-volume search on SQL-based resources
- OpenSearch/Elasticsearch provides faster full-text search for messages
### Breaking Changes
- None. All new parameters are optional and backward compatible.
### Frontend Integration
- Frontend PR tracking advanced search UI will consume these endpoints
- Time range pickers should convert JavaScript `Date` to Unix timestamps
(seconds)
- Date conversion: `Math.floor(date.getTime() / 1000)`
### Error Handling
- Invalid `from` parameter format is silently ignored (filter not
applied)
- Time range exceeding 90 days returns `422` with error message
- Missing `q` parameter returns `422` (existing behavior)
- Unauthorized inbox access is filtered out (no error, just excluded
from results)
---------
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Vinay Keerthi
@@ -218,6 +218,49 @@ jobs:
|
||||
source ~/.rvm/scripts/rvm
|
||||
bundle install
|
||||
|
||||
# Install and configure OpenSearch
|
||||
- run:
|
||||
name: Install OpenSearch
|
||||
command: |
|
||||
# Download and install OpenSearch 2.11.0 (compatible with Elasticsearch 7.x clients)
|
||||
wget https://artifacts.opensearch.org/releases/bundle/opensearch/2.11.0/opensearch-2.11.0-linux-x64.tar.gz
|
||||
tar -xzf opensearch-2.11.0-linux-x64.tar.gz
|
||||
sudo mv opensearch-2.11.0 /opt/opensearch
|
||||
|
||||
- run:
|
||||
name: Configure and Start OpenSearch
|
||||
command: |
|
||||
# Configure OpenSearch for single-node testing
|
||||
cat > /opt/opensearch/config/opensearch.yml \<< EOF
|
||||
cluster.name: chatwoot-test
|
||||
node.name: node-1
|
||||
network.host: 0.0.0.0
|
||||
http.port: 9200
|
||||
discovery.type: single-node
|
||||
plugins.security.disabled: true
|
||||
EOF
|
||||
|
||||
# Set ownership and permissions
|
||||
sudo chown -R $USER:$USER /opt/opensearch
|
||||
|
||||
# Start OpenSearch in background
|
||||
/opt/opensearch/bin/opensearch -d -p /tmp/opensearch.pid
|
||||
|
||||
- run:
|
||||
name: Wait for OpenSearch to be ready
|
||||
command: |
|
||||
echo "Waiting for OpenSearch to start..."
|
||||
for i in {1..30}; do
|
||||
if curl -s http://localhost:9200/_cluster/health | grep -q '"status"'; then
|
||||
echo "OpenSearch is ready!"
|
||||
exit 0
|
||||
fi
|
||||
echo "Waiting... ($i/30)"
|
||||
sleep 2
|
||||
done
|
||||
echo "OpenSearch failed to start"
|
||||
exit 1
|
||||
|
||||
# Configure environment and database
|
||||
- run:
|
||||
name: Database Setup and Configure Environment Variables
|
||||
@@ -234,6 +277,7 @@ jobs:
|
||||
sed -i -e '/POSTGRES_USERNAME/ s/=.*/=chatwoot/' .env
|
||||
sed -i -e "/POSTGRES_PASSWORD/ s/=.*/=$pg_pass/" .env
|
||||
echo -en "\nINSTALLATION_ENV=circleci" >> ".env"
|
||||
echo -en "\nOPENSEARCH_URL=http://localhost:9200" >> ".env"
|
||||
|
||||
# Database setup
|
||||
- run:
|
||||
|
||||
@@ -28,5 +28,7 @@ class Api::V1::Accounts::SearchController < Api::V1::Accounts::BaseController
|
||||
search_type: search_type,
|
||||
params: params
|
||||
).perform
|
||||
rescue ArgumentError => e
|
||||
render json: { error: e.message }, status: :unprocessable_entity
|
||||
end
|
||||
end
|
||||
|
||||
@@ -14,38 +14,48 @@ class SearchAPI extends ApiClient {
|
||||
});
|
||||
}
|
||||
|
||||
contacts({ q, page = 1 }) {
|
||||
contacts({ q, page = 1, since, until }) {
|
||||
return axios.get(`${this.url}/contacts`, {
|
||||
params: {
|
||||
q,
|
||||
page: page,
|
||||
since,
|
||||
until,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
conversations({ q, page = 1 }) {
|
||||
conversations({ q, page = 1, since, until }) {
|
||||
return axios.get(`${this.url}/conversations`, {
|
||||
params: {
|
||||
q,
|
||||
page: page,
|
||||
since,
|
||||
until,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
messages({ q, page = 1 }) {
|
||||
messages({ q, page = 1, since, until, from, inboxId }) {
|
||||
return axios.get(`${this.url}/messages`, {
|
||||
params: {
|
||||
q,
|
||||
page: page,
|
||||
since,
|
||||
until,
|
||||
from,
|
||||
inbox_id: inboxId,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
articles({ q, page = 1 }) {
|
||||
articles({ q, page = 1, since, until }) {
|
||||
return axios.get(`${this.url}/articles`, {
|
||||
params: {
|
||||
q,
|
||||
page: page,
|
||||
since,
|
||||
until,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
134
app/javascript/dashboard/api/specs/search.spec.js
Normal file
134
app/javascript/dashboard/api/specs/search.spec.js
Normal file
@@ -0,0 +1,134 @@
|
||||
import searchAPI from '../search';
|
||||
import ApiClient from '../ApiClient';
|
||||
|
||||
describe('#SearchAPI', () => {
|
||||
it('creates correct instance', () => {
|
||||
expect(searchAPI).toBeInstanceOf(ApiClient);
|
||||
expect(searchAPI).toHaveProperty('get');
|
||||
expect(searchAPI).toHaveProperty('contacts');
|
||||
expect(searchAPI).toHaveProperty('conversations');
|
||||
expect(searchAPI).toHaveProperty('messages');
|
||||
expect(searchAPI).toHaveProperty('articles');
|
||||
});
|
||||
|
||||
describe('API calls', () => {
|
||||
const originalAxios = window.axios;
|
||||
const axiosMock = {
|
||||
get: vi.fn(() => Promise.resolve()),
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
window.axios = axiosMock;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
window.axios = originalAxios;
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('#get', () => {
|
||||
searchAPI.get({ q: 'test query' });
|
||||
expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search', {
|
||||
params: { q: 'test query' },
|
||||
});
|
||||
});
|
||||
|
||||
it('#contacts', () => {
|
||||
searchAPI.contacts({ q: 'test', page: 1 });
|
||||
expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search/contacts', {
|
||||
params: { q: 'test', page: 1, since: undefined, until: undefined },
|
||||
});
|
||||
});
|
||||
|
||||
it('#contacts with date filters', () => {
|
||||
searchAPI.contacts({
|
||||
q: 'test',
|
||||
page: 2,
|
||||
since: 1700000000,
|
||||
until: 1732000000,
|
||||
});
|
||||
expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search/contacts', {
|
||||
params: { q: 'test', page: 2, since: 1700000000, until: 1732000000 },
|
||||
});
|
||||
});
|
||||
|
||||
it('#conversations', () => {
|
||||
searchAPI.conversations({ q: 'test', page: 1 });
|
||||
expect(axiosMock.get).toHaveBeenCalledWith(
|
||||
'/api/v1/search/conversations',
|
||||
{
|
||||
params: { q: 'test', page: 1, since: undefined, until: undefined },
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
it('#conversations with date filters', () => {
|
||||
searchAPI.conversations({
|
||||
q: 'test',
|
||||
page: 1,
|
||||
since: 1700000000,
|
||||
until: 1732000000,
|
||||
});
|
||||
expect(axiosMock.get).toHaveBeenCalledWith(
|
||||
'/api/v1/search/conversations',
|
||||
{
|
||||
params: { q: 'test', page: 1, since: 1700000000, until: 1732000000 },
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
it('#messages', () => {
|
||||
searchAPI.messages({ q: 'test', page: 1 });
|
||||
expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search/messages', {
|
||||
params: {
|
||||
q: 'test',
|
||||
page: 1,
|
||||
since: undefined,
|
||||
until: undefined,
|
||||
from: undefined,
|
||||
inbox_id: undefined,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('#messages with all filters', () => {
|
||||
searchAPI.messages({
|
||||
q: 'test',
|
||||
page: 1,
|
||||
since: 1700000000,
|
||||
until: 1732000000,
|
||||
from: 'contact:42',
|
||||
inboxId: 10,
|
||||
});
|
||||
expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search/messages', {
|
||||
params: {
|
||||
q: 'test',
|
||||
page: 1,
|
||||
since: 1700000000,
|
||||
until: 1732000000,
|
||||
from: 'contact:42',
|
||||
inbox_id: 10,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('#articles', () => {
|
||||
searchAPI.articles({ q: 'test', page: 1 });
|
||||
expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search/articles', {
|
||||
params: { q: 'test', page: 1, since: undefined, until: undefined },
|
||||
});
|
||||
});
|
||||
|
||||
it('#articles with date filters', () => {
|
||||
searchAPI.articles({
|
||||
q: 'test',
|
||||
page: 2,
|
||||
since: 1700000000,
|
||||
until: 1732000000,
|
||||
});
|
||||
expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/search/articles', {
|
||||
params: { q: 'test', page: 2, since: 1700000000, until: 1732000000 },
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -19,7 +19,7 @@ const handleClick = () => {
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col w-full shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
|
||||
class="flex flex-col w-full outline-1 outline outline-n-container group/cardLayout rounded-xl bg-n-solid-2"
|
||||
>
|
||||
<div
|
||||
class="flex w-full gap-3 py-5"
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
|
||||
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
|
||||
|
||||
const props = defineProps({
|
||||
menuItems: {
|
||||
@@ -37,9 +38,13 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
disableLocalFiltering: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['action']);
|
||||
const emit = defineEmits(['action', 'search']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
@@ -57,6 +62,7 @@ const flattenedMenuItems = computed(() => {
|
||||
});
|
||||
|
||||
const filteredMenuItems = computed(() => {
|
||||
if (props.disableLocalFiltering) return props.menuItems;
|
||||
if (!searchQuery.value) return flattenedMenuItems.value;
|
||||
|
||||
return flattenedMenuItems.value.filter(item =>
|
||||
@@ -69,7 +75,7 @@ const filteredMenuSections = computed(() => {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (!searchQuery.value) {
|
||||
if (props.disableLocalFiltering || !searchQuery.value) {
|
||||
return props.menuSections;
|
||||
}
|
||||
|
||||
@@ -89,6 +95,12 @@ const filteredMenuSections = computed(() => {
|
||||
.filter(section => section.items.length > 0);
|
||||
});
|
||||
|
||||
const handleSearchInput = event => {
|
||||
if (props.disableLocalFiltering) {
|
||||
emit('search', event.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAction = item => {
|
||||
const { action, value, ...rest } = item;
|
||||
emit('action', { action, value, ...rest });
|
||||
@@ -118,7 +130,7 @@ onMounted(() => {
|
||||
>
|
||||
<div
|
||||
v-if="showSearch"
|
||||
class="sticky top-0 bg-n-alpha-3 backdrop-blur-sm pt-2"
|
||||
class="sticky top-0 bg-n-alpha-3 backdrop-blur-sm pt-2 z-20"
|
||||
>
|
||||
<div class="relative">
|
||||
<span class="absolute i-lucide-search size-3.5 top-2 left-3" />
|
||||
@@ -130,6 +142,7 @@ onMounted(() => {
|
||||
searchPlaceholder || t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')
|
||||
"
|
||||
class="reset-base w-full h-8 py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
|
||||
@input="handleSearchInput"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -141,10 +154,23 @@ onMounted(() => {
|
||||
>
|
||||
<p
|
||||
v-if="section.title"
|
||||
class="px-2 pt-2 text-xs font-medium text-n-slate-11 uppercase tracking-wide"
|
||||
class="px-2 py-2 text-xs mb-0 font-medium text-n-slate-11 uppercase tracking-wide sticky z-10 bg-n-alpha-3 backdrop-blur-sm"
|
||||
:class="showSearch ? 'top-10' : 'top-0'"
|
||||
>
|
||||
{{ section.title }}
|
||||
</p>
|
||||
<div
|
||||
v-if="section.isLoading"
|
||||
class="flex items-center justify-center py-2"
|
||||
>
|
||||
<Spinner :size="24" />
|
||||
</div>
|
||||
<div
|
||||
v-else-if="!section.items.length && section.emptyState"
|
||||
class="text-sm text-n-slate-11 px-2 py-1.5"
|
||||
>
|
||||
{{ section.emptyState }}
|
||||
</div>
|
||||
<button
|
||||
v-for="(item, itemIndex) in section.items"
|
||||
:key="item.value || itemIndex"
|
||||
@@ -235,5 +261,6 @@ onMounted(() => {
|
||||
: t('DROPDOWN_MENU.EMPTY_STATE')
|
||||
}}
|
||||
</div>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -17,6 +17,10 @@ const { attachment } = defineProps({
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
showTranscribedText: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
defineOptions({
|
||||
@@ -182,7 +186,7 @@ const downloadAudio = async () => {
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="attachment.transcribedText"
|
||||
v-if="attachment.transcribedText && showTranscribedText"
|
||||
class="text-n-slate-12 p-3 text-sm bg-n-alpha-1 rounded-lg w-full break-words"
|
||||
>
|
||||
{{ attachment.transcribedText }}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { computed, ref, onMounted, nextTick } from 'vue';
|
||||
import { computed, ref, onMounted, nextTick, watch } from 'vue';
|
||||
import { useResizeObserver } from '@vueuse/core';
|
||||
|
||||
const props = defineProps({
|
||||
@@ -31,20 +31,24 @@ const enableTransition = ref(false);
|
||||
const activeElement = computed(() => tabRefs.value[activeTab.value]);
|
||||
|
||||
const updateIndicator = () => {
|
||||
if (!activeElement.value) return;
|
||||
nextTick(() => {
|
||||
if (!activeElement.value) return;
|
||||
|
||||
indicatorStyle.value = {
|
||||
left: `${activeElement.value.offsetLeft}px`,
|
||||
width: `${activeElement.value.offsetWidth}px`,
|
||||
};
|
||||
indicatorStyle.value = {
|
||||
left: `${activeElement.value.offsetLeft}px`,
|
||||
width: `${activeElement.value.offsetWidth}px`,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
useResizeObserver(activeElement, () => {
|
||||
if (enableTransition.value || !activeElement.value) updateIndicator();
|
||||
useResizeObserver(activeElement, updateIndicator);
|
||||
|
||||
// Watch for prop/tabs changes to update indicator position
|
||||
watch([() => props.initialActiveTab, () => props.tabs], updateIndicator, {
|
||||
immediate: true,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
updateIndicator();
|
||||
nextTick(() => {
|
||||
enableTransition.value = true;
|
||||
});
|
||||
@@ -66,7 +70,7 @@ const showDivider = index => {
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="relative flex items-center h-8 rounded-lg bg-n-alpha-1 w-fit transition-all duration-200 ease-out has-[button:active]:scale-[1.01]"
|
||||
class="relative flex items-center h-8 rounded-lg bg-n-alpha-1 dark:bg-n-solid-1 w-fit transition-all duration-200 ease-out has-[button:active]:scale-[1.01]"
|
||||
>
|
||||
<div
|
||||
class="absolute rounded-lg bg-n-solid-active shadow-sm pointer-events-none h-8 outline-1 outline outline-n-container inset-y-0"
|
||||
|
||||
@@ -5,4 +5,5 @@ export const LOCAL_STORAGE_KEYS = {
|
||||
COLOR_SCHEME: 'color_scheme',
|
||||
DISMISSED_LABEL_SUGGESTIONS: 'labelSuggestionsDismissed',
|
||||
MESSAGE_REPLY_TO: 'messageReplyTo',
|
||||
RECENT_SEARCHES: 'recentSearches',
|
||||
};
|
||||
|
||||
@@ -43,6 +43,7 @@ export const FEATURE_FLAGS = {
|
||||
SAML: 'saml',
|
||||
QUOTED_EMAIL_REPLY: 'quoted_email_reply',
|
||||
COMPANIES: 'companies',
|
||||
ADVANCED_SEARCH: 'advanced_search',
|
||||
};
|
||||
|
||||
export const PREMIUM_FEATURES = [
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"SEARCH": {
|
||||
"TABS": {
|
||||
"ALL": "All",
|
||||
"ALL": "All results",
|
||||
"CONTACTS": "Contacts",
|
||||
"CONVERSATIONS": "Conversations",
|
||||
"MESSAGES": "Messages",
|
||||
@@ -19,14 +19,50 @@
|
||||
"LOADING_DATA": "Loading",
|
||||
"EMPTY_STATE": "No {item} found for query '{query}'",
|
||||
"EMPTY_STATE_FULL": "No results found for query '{query}'",
|
||||
"PLACEHOLDER_KEYBINDING": "/ to focus",
|
||||
"PLACEHOLDER_KEYBINDING": "/to focus",
|
||||
"INPUT_PLACEHOLDER": "Type 3 or more characters to search",
|
||||
"RECENT_SEARCHES": "Recent searches",
|
||||
"CLEAR_ALL": "Clear all",
|
||||
"MOST_RECENT": "Most recent",
|
||||
"EMPTY_STATE_DEFAULT": "Search by conversation id, email, phone number, messages for better search results. ",
|
||||
"BOT_LABEL": "Bot",
|
||||
"READ_MORE": "Read more",
|
||||
"READ_LESS": "Read less",
|
||||
"WROTE": "wrote:",
|
||||
"FROM": "from",
|
||||
"EMAIL": "email",
|
||||
"EMAIL_SUBJECT": "subject"
|
||||
"FROM": "From",
|
||||
"EMAIL": "Email",
|
||||
"EMAIL_SUBJECT": "Subject",
|
||||
"PRIVATE": "Private note",
|
||||
"TRANSCRIPT": "Transcript",
|
||||
"CREATED_AT": "created {time}",
|
||||
"UPDATED_AT": "updated {time}",
|
||||
"SORT_BY": {
|
||||
"RELEVANCE": "Relevance"
|
||||
},
|
||||
"DATE_RANGE": {
|
||||
"LAST_7_DAYS": "Last 7 days",
|
||||
"LAST_30_DAYS": "Last 30 days",
|
||||
"LAST_60_DAYS": "Last 60 days",
|
||||
"LAST_90_DAYS": "Last 90 days",
|
||||
"CUSTOM_RANGE": "Custom range:",
|
||||
"CREATED_BETWEEN": "Created between",
|
||||
"AND": "and",
|
||||
"APPLY": "Apply",
|
||||
"BEFORE_DATE": "Before {date}",
|
||||
"AFTER_DATE": "After {date}",
|
||||
"TIME_RANGE": "Filter by time",
|
||||
"CLEAR_FILTER": "Clear filter"
|
||||
},
|
||||
"FILTERS": {
|
||||
"FILTER_MESSAGE": "Filter messages by:",
|
||||
"FROM": "Sender",
|
||||
"IN": "Inbox",
|
||||
"AGENTS": "Agents",
|
||||
"CONTACTS": "Contacts",
|
||||
"INBOXES": "Inboxes",
|
||||
"NO_AGENTS": "No agents found",
|
||||
"NO_CONTACTS": "Start by searching to see results",
|
||||
"NO_INBOXES": "No inboxes found"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script setup>
|
||||
import { ref, useTemplateRef, onMounted, watch, nextTick, computed } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
|
||||
import ReadMore from './ReadMore.vue';
|
||||
import { useExpandableContent } from 'shared/composables/useExpandableContent';
|
||||
|
||||
const props = defineProps({
|
||||
author: {
|
||||
@@ -18,6 +19,12 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const { highlightContent } = useMessageFormatter();
|
||||
|
||||
const { contentElement, showReadMore, showReadLess, toggleExpanded } =
|
||||
useExpandableContent();
|
||||
|
||||
const messageContent = computed(() => {
|
||||
// We perform search on either content or email subject or transcribed text
|
||||
if (props.message.content) {
|
||||
@@ -30,33 +37,19 @@ const messageContent = computed(() => {
|
||||
return email.subject;
|
||||
}
|
||||
|
||||
const audioAttachment = props.message.attachments.find(
|
||||
const audioAttachment = props.message.attachments?.find(
|
||||
attachment => attachment.file_type === 'audio'
|
||||
);
|
||||
return audioAttachment?.transcribed_text || '';
|
||||
});
|
||||
|
||||
const { highlightContent } = useMessageFormatter();
|
||||
|
||||
const messageContainer = useTemplateRef('messageContainer');
|
||||
const isOverflowing = ref(false);
|
||||
|
||||
const setOverflow = () => {
|
||||
const wrap = messageContainer.value;
|
||||
if (wrap) {
|
||||
const message = wrap.querySelector('.message-content');
|
||||
isOverflowing.value = message.offsetHeight > 150;
|
||||
}
|
||||
};
|
||||
|
||||
const escapeHtml = html => {
|
||||
var text = document.createTextNode(html);
|
||||
var p = document.createElement('p');
|
||||
p.appendChild(text);
|
||||
return p.innerText;
|
||||
const wrapper = document.createElement('p');
|
||||
wrapper.textContent = html;
|
||||
return wrapper.textContent;
|
||||
};
|
||||
|
||||
const prepareContent = () => {
|
||||
const highlightedContent = computed(() => {
|
||||
const content = messageContent.value || '';
|
||||
const escapedText = escapeHtml(content);
|
||||
return highlightContent(
|
||||
@@ -64,50 +57,59 @@ const prepareContent = () => {
|
||||
props.searchTerm,
|
||||
'searchkey--highlight'
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
watch(() => {
|
||||
return messageContainer.value;
|
||||
}, setOverflow);
|
||||
|
||||
nextTick(setOverflow);
|
||||
const authorText = computed(() => {
|
||||
const author = props.author || '';
|
||||
const wroteText = t('SEARCH.WROTE');
|
||||
return author ? `${author} ${wroteText} ` : '';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<blockquote ref="messageContainer" class="message border-l-2 border-n-weak">
|
||||
<p class="header">
|
||||
<strong class="text-n-slate-11">
|
||||
{{ author }}
|
||||
</strong>
|
||||
{{ $t('SEARCH.WROTE') }}
|
||||
</p>
|
||||
<ReadMore :shrink="isOverflowing" @expand="isOverflowing = false">
|
||||
<div v-dompurify-html="prepareContent()" class="message-content" />
|
||||
</ReadMore>
|
||||
</blockquote>
|
||||
<div
|
||||
ref="contentElement"
|
||||
class="break-words grid items-center text-n-slate-11 text-sm leading-relaxed"
|
||||
:class="showReadMore ? 'grid-cols-[1fr_auto]' : 'grid-cols-1'"
|
||||
>
|
||||
<div
|
||||
class="min-w-0"
|
||||
:class="{
|
||||
'overflow-hidden whitespace-nowrap text-ellipsis': showReadMore,
|
||||
}"
|
||||
>
|
||||
<span v-if="authorText" class="text-n-slate-11 font-medium leading-4">{{
|
||||
authorText
|
||||
}}</span>
|
||||
<span
|
||||
v-dompurify-html="highlightedContent"
|
||||
class="message-content text-n-slate-12 [&_.searchkey--highlight]:text-n-slate-12 [&_.searchkey--highlight]:font-semibold"
|
||||
/>
|
||||
<button
|
||||
v-if="showReadLess"
|
||||
class="text-sm text-n-slate-11 underline cursor-pointer bg-transparent border-0 p-0 hover:text-n-slate-12 font-medium ltr:ml-0.5 rtl:mr-0.5"
|
||||
@click.prevent="toggleExpanded(false)"
|
||||
>
|
||||
{{ t('SEARCH.READ_LESS') }}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="showReadMore"
|
||||
class="text-sm text-n-slate-11 underline cursor-pointer bg-transparent border-0 p-0 hover:text-n-slate-12 font-medium justify-self-end ltr:ml-0.5 rtl:mr-0.5"
|
||||
@click.prevent="toggleExpanded(true)"
|
||||
>
|
||||
{{ t('SEARCH.READ_MORE') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.message {
|
||||
@apply py-0 px-2 mt-2;
|
||||
.message-content::v-deep p {
|
||||
@apply inline;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message-content::v-deep p,
|
||||
.message-content::v-deep li::marker {
|
||||
@apply text-n-slate-11 mb-1;
|
||||
}
|
||||
|
||||
.header {
|
||||
@apply text-n-slate-11 mb-1;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
@apply break-words text-n-slate-11;
|
||||
}
|
||||
|
||||
.message-content::v-deep .searchkey--highlight {
|
||||
@apply text-n-slate-12 text-sm font-semibold;
|
||||
.message-content::v-deep br {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
<script setup>
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
defineProps({
|
||||
shrink: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(['expand']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="{
|
||||
'max-h-[100px] overflow-hidden relative': shrink,
|
||||
}"
|
||||
>
|
||||
<slot />
|
||||
<div
|
||||
v-if="shrink"
|
||||
class="absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t to-transparent from-n-background flex items-end justify-center pb-2"
|
||||
>
|
||||
<NextButton
|
||||
:label="$t('SEARCH.READ_MORE')"
|
||||
icon="i-lucide-chevrons-down"
|
||||
blue
|
||||
xs
|
||||
faded
|
||||
class="backdrop-filter backdrop-blur-[2px]"
|
||||
@click.prevent="$emit('expand')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,116 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { LocalStorage } from 'shared/helpers/localStorage';
|
||||
import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
|
||||
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const emit = defineEmits(['selectSearch', 'clearAll']);
|
||||
|
||||
const MAX_RECENT_SEARCHES = 3;
|
||||
const recentSearches = ref([]);
|
||||
|
||||
const loadRecentSearches = () => {
|
||||
const stored = LocalStorage.get(LOCAL_STORAGE_KEYS.RECENT_SEARCHES) || [];
|
||||
recentSearches.value = Array.isArray(stored) ? stored : [];
|
||||
};
|
||||
|
||||
const saveRecentSearches = () => {
|
||||
LocalStorage.set(LOCAL_STORAGE_KEYS.RECENT_SEARCHES, recentSearches.value);
|
||||
};
|
||||
|
||||
const addRecentSearch = query => {
|
||||
if (!query || query.trim().length < 2) return;
|
||||
|
||||
const trimmedQuery = query.trim();
|
||||
|
||||
const existingIndex = recentSearches.value.findIndex(
|
||||
search => search.toLowerCase() === trimmedQuery.toLowerCase()
|
||||
);
|
||||
|
||||
if (existingIndex !== -1) {
|
||||
recentSearches.value.splice(existingIndex, 1);
|
||||
}
|
||||
|
||||
recentSearches.value.unshift(trimmedQuery);
|
||||
|
||||
if (recentSearches.value.length > MAX_RECENT_SEARCHES) {
|
||||
recentSearches.value = recentSearches.value.slice(0, MAX_RECENT_SEARCHES);
|
||||
}
|
||||
|
||||
saveRecentSearches();
|
||||
};
|
||||
|
||||
const clearRecentSearches = () => {
|
||||
recentSearches.value = [];
|
||||
LocalStorage.remove(LOCAL_STORAGE_KEYS.RECENT_SEARCHES);
|
||||
};
|
||||
|
||||
const hasRecentSearches = computed(() => recentSearches.value?.length > 0);
|
||||
|
||||
const onSelectSearch = query => {
|
||||
emit('selectSearch', query);
|
||||
};
|
||||
|
||||
const onClearAll = () => {
|
||||
clearRecentSearches();
|
||||
emit('clearAll');
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
addRecentSearch,
|
||||
loadRecentSearches,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loadRecentSearches();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="hasRecentSearches" class="px-4 pb-4 w-full pt-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<Icon icon="i-lucide-rotate-ccw" class="text-n-slate-10 size-4" />
|
||||
<h3 class="text-base font-medium text-n-slate-10">
|
||||
{{ $t('SEARCH.RECENT_SEARCHES') }}
|
||||
</h3>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
xs
|
||||
slate
|
||||
ghost
|
||||
class="!text-n-slate-10 hover:!text-n-slate-12"
|
||||
@mousedown.prevent
|
||||
@click="onClearAll"
|
||||
>
|
||||
{{ $t('SEARCH.CLEAR_ALL') }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 items-start">
|
||||
<button
|
||||
v-for="(search, index) in recentSearches"
|
||||
:key="search"
|
||||
type="button"
|
||||
class="w-full flex items-center gap-2.5 text-left text-base text-n-slate-12 rounded-lg transition-all duration-150 group p-0"
|
||||
@mousedown.prevent
|
||||
@click="onSelectSearch(search)"
|
||||
>
|
||||
<Icon
|
||||
icon="i-lucide-search"
|
||||
class="text-n-slate-10 group-hover:text-n-slate-11 transition-colors duration-150 size-4"
|
||||
/>
|
||||
<span class="flex-1 truncate">{{ search }}</span>
|
||||
<span
|
||||
class="text-xs text-n-slate-8 opacity-0 group-hover:opacity-100 transition-opacity duration-150"
|
||||
>
|
||||
{{ index === 0 ? $t('SEARCH.MOST_RECENT') : '' }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else />
|
||||
</template>
|
||||
@@ -0,0 +1,239 @@
|
||||
<script setup>
|
||||
import { ref, computed, defineModel, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
import { debounce } from '@chatwoot/utils';
|
||||
import { useMapGetter } from 'dashboard/composables/store.js';
|
||||
import { searchContacts } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
|
||||
import { useCamelCase } from 'dashboard/composables/useTransformKeys';
|
||||
import { fetchContactDetails } from '../helpers/searchHelper';
|
||||
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
label: { type: String, required: true },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
|
||||
const FROM_TYPE = {
|
||||
CONTACT: 'contact',
|
||||
AGENT: 'agent',
|
||||
};
|
||||
|
||||
const MENU_ACTIONS_SELECT = 'select';
|
||||
|
||||
const modelValue = defineModel({ type: String, default: null });
|
||||
|
||||
const { t } = useI18n();
|
||||
const [showDropdown, toggleDropdown] = useToggle();
|
||||
|
||||
const searchQuery = ref('');
|
||||
const searchedContacts = ref([]);
|
||||
const isSearching = ref(false);
|
||||
const selectedContact = ref(null);
|
||||
|
||||
const agentsList = useMapGetter('agents/getVerifiedAgents');
|
||||
|
||||
const createMenuItem = (item, type, isAgent = false) => {
|
||||
const transformed = useCamelCase(item, { deep: true });
|
||||
const value = `${type}:${transformed.id}`;
|
||||
return {
|
||||
label: transformed.name,
|
||||
value,
|
||||
action: MENU_ACTIONS_SELECT,
|
||||
type,
|
||||
thumbnail: {
|
||||
name: transformed.name,
|
||||
src: isAgent ? transformed.avatarUrl : transformed.thumbnail,
|
||||
},
|
||||
...(isAgent
|
||||
? {}
|
||||
: { description: transformed.email || transformed.phoneNumber }),
|
||||
isSelected: modelValue.value === value,
|
||||
};
|
||||
};
|
||||
|
||||
const agentsSection = computed(() => {
|
||||
const agents =
|
||||
agentsList.value?.map(agent =>
|
||||
createMenuItem(agent, FROM_TYPE.AGENT, true)
|
||||
) || [];
|
||||
return searchQuery.value
|
||||
? agents.filter(agent =>
|
||||
agent.label.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
)
|
||||
: agents;
|
||||
});
|
||||
|
||||
const contactsSection = computed(
|
||||
() =>
|
||||
searchedContacts.value?.map(contact =>
|
||||
createMenuItem(contact, FROM_TYPE.CONTACT)
|
||||
) || []
|
||||
);
|
||||
|
||||
const menuSections = computed(() => [
|
||||
{
|
||||
title: t('SEARCH.FILTERS.CONTACTS'),
|
||||
items: contactsSection.value,
|
||||
isLoading: isSearching.value,
|
||||
emptyState: t('SEARCH.FILTERS.NO_CONTACTS'),
|
||||
},
|
||||
{
|
||||
title: t('SEARCH.FILTERS.AGENTS'),
|
||||
items: agentsSection.value,
|
||||
emptyState: t('SEARCH.FILTERS.NO_AGENTS'),
|
||||
},
|
||||
]);
|
||||
|
||||
const selectedLabel = computed(() => {
|
||||
if (!modelValue.value) return props.label;
|
||||
|
||||
const [type, id] = modelValue.value.split(':');
|
||||
const numericId = Number(id);
|
||||
|
||||
if (type === FROM_TYPE.CONTACT) {
|
||||
if (selectedContact.value?.id === numericId) {
|
||||
return `${props.label}: ${selectedContact.value.name}`;
|
||||
}
|
||||
const contact = searchedContacts.value?.find(c => c.id === numericId);
|
||||
if (contact) return `${props.label}: ${contact.name}`;
|
||||
} else if (type === FROM_TYPE.AGENT) {
|
||||
const agent = agentsList.value?.find(a => a.id === numericId);
|
||||
if (agent) return `${props.label}: ${agent.name}`;
|
||||
}
|
||||
|
||||
return `${props.label}: ${numericId}`;
|
||||
});
|
||||
|
||||
const debouncedSearch = debounce(async query => {
|
||||
if (!query) {
|
||||
searchedContacts.value = selectedContact.value
|
||||
? [selectedContact.value]
|
||||
: [];
|
||||
isSearching.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const contacts = await searchContacts({
|
||||
keys: ['name', 'email', 'phone_number'],
|
||||
query,
|
||||
});
|
||||
|
||||
// Add selected contact to top if not already in results
|
||||
const allContacts = selectedContact.value
|
||||
? [
|
||||
selectedContact.value,
|
||||
...contacts.filter(c => c.id !== selectedContact.value.id),
|
||||
]
|
||||
: contacts;
|
||||
|
||||
searchedContacts.value = allContacts;
|
||||
} catch {
|
||||
// Ignore error
|
||||
} finally {
|
||||
isSearching.value = false;
|
||||
}
|
||||
}, 300);
|
||||
|
||||
const performSearch = query => {
|
||||
searchQuery.value = query;
|
||||
if (query) {
|
||||
searchedContacts.value = selectedContact.value
|
||||
? [selectedContact.value]
|
||||
: [];
|
||||
isSearching.value = true;
|
||||
}
|
||||
debouncedSearch(query);
|
||||
};
|
||||
|
||||
const onToggleDropdown = () => {
|
||||
if (!showDropdown.value) {
|
||||
// Reset search when opening dropdown
|
||||
searchQuery.value = '';
|
||||
searchedContacts.value = selectedContact.value
|
||||
? [selectedContact.value]
|
||||
: [];
|
||||
}
|
||||
toggleDropdown();
|
||||
};
|
||||
|
||||
const handleAction = item => {
|
||||
if (modelValue.value === item.value) {
|
||||
modelValue.value = null;
|
||||
selectedContact.value = null;
|
||||
} else {
|
||||
modelValue.value = item.value;
|
||||
|
||||
if (item.type === FROM_TYPE.CONTACT) {
|
||||
const [, id] = item.value.split(':');
|
||||
selectedContact.value = {
|
||||
id: Number(id),
|
||||
name: item.label,
|
||||
thumbnail: item.thumbnail?.src,
|
||||
};
|
||||
} else {
|
||||
selectedContact.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
toggleDropdown(false);
|
||||
emit('change');
|
||||
};
|
||||
|
||||
const resolveContactName = async () => {
|
||||
if (!modelValue.value) return;
|
||||
|
||||
const [type, id] = modelValue.value.split(':');
|
||||
if (type !== FROM_TYPE.CONTACT) return;
|
||||
|
||||
const numericId = Number(id);
|
||||
if (selectedContact.value?.id === numericId) return;
|
||||
|
||||
const contact = await fetchContactDetails(numericId);
|
||||
if (contact) {
|
||||
selectedContact.value = {
|
||||
id: contact.id,
|
||||
name: contact.name,
|
||||
thumbnail: contact.thumbnail,
|
||||
};
|
||||
if (!searchedContacts.value.some(c => c.id === contact.id)) {
|
||||
searchedContacts.value.push(selectedContact.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => modelValue.value, resolveContactName, { immediate: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-on-click-outside="() => toggleDropdown(false)"
|
||||
class="relative flex items-center group min-w-0 max-w-full"
|
||||
>
|
||||
<Button
|
||||
sm
|
||||
:variant="showDropdown ? 'faded' : 'ghost'"
|
||||
slate
|
||||
:label="selectedLabel"
|
||||
trailing-icon
|
||||
icon="i-lucide-chevron-down"
|
||||
class="!px-2 max-w-full"
|
||||
@click="onToggleDropdown"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showDropdown"
|
||||
:menu-sections="menuSections"
|
||||
show-search
|
||||
disable-local-filtering
|
||||
:is-searching="isSearching"
|
||||
class="mt-1 ltr:left-0 rtl:right-0 top-full w-64 max-h-80 overflow-y-auto"
|
||||
@search="performSearch"
|
||||
@action="handleAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,271 @@
|
||||
<script setup>
|
||||
import { computed, ref, defineModel } from 'vue';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
import {
|
||||
subDays,
|
||||
subMonths,
|
||||
subYears,
|
||||
startOfDay,
|
||||
endOfDay,
|
||||
format,
|
||||
getUnixTime,
|
||||
fromUnixTime,
|
||||
} from 'date-fns';
|
||||
import { DATE_RANGE_TYPES } from '../helpers/searchHelper';
|
||||
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
const modelValue = defineModel({
|
||||
type: Object,
|
||||
default: () => ({ type: null, from: null, to: null }),
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const [showDropdown, toggleDropdown] = useToggle();
|
||||
|
||||
const customFrom = ref('');
|
||||
const customTo = ref('');
|
||||
const rangeType = ref(DATE_RANGE_TYPES.BETWEEN);
|
||||
|
||||
// Calculate min date (90 days ago) for date inputs
|
||||
const minDate = computed(() => format(subDays(new Date(), 90), 'yyyy-MM-dd'));
|
||||
const maxDate = computed(() => format(new Date(), 'yyyy-MM-dd'));
|
||||
|
||||
// Check if both custom date inputs have values
|
||||
const hasCustomDates = computed(() => customFrom.value && customTo.value);
|
||||
|
||||
const DATE_FILTER_ACTIONS = {
|
||||
PRESET: 'preset',
|
||||
SELECT: 'select',
|
||||
};
|
||||
|
||||
const PRESET_RANGES = computed(() => [
|
||||
{
|
||||
label: t('SEARCH.DATE_RANGE.LAST_7_DAYS'),
|
||||
value: DATE_RANGE_TYPES.LAST_7_DAYS,
|
||||
days: 7,
|
||||
},
|
||||
{
|
||||
label: t('SEARCH.DATE_RANGE.LAST_30_DAYS'),
|
||||
value: DATE_RANGE_TYPES.LAST_30_DAYS,
|
||||
days: 30,
|
||||
},
|
||||
{
|
||||
label: t('SEARCH.DATE_RANGE.LAST_60_DAYS'),
|
||||
value: DATE_RANGE_TYPES.LAST_60_DAYS,
|
||||
days: 60,
|
||||
},
|
||||
{
|
||||
label: t('SEARCH.DATE_RANGE.LAST_90_DAYS'),
|
||||
value: DATE_RANGE_TYPES.LAST_90_DAYS,
|
||||
days: 90,
|
||||
},
|
||||
]);
|
||||
|
||||
const computeDateRange = config => {
|
||||
const end = endOfDay(new Date());
|
||||
let start;
|
||||
|
||||
if (config.days) {
|
||||
start = startOfDay(subDays(end, config.days));
|
||||
} else if (config.months) {
|
||||
start = startOfDay(subMonths(end, config.months));
|
||||
} else {
|
||||
start = startOfDay(subYears(end, config.years));
|
||||
}
|
||||
|
||||
return { type: config.value, from: getUnixTime(start), to: getUnixTime(end) };
|
||||
};
|
||||
|
||||
const selectedValue = computed(() => {
|
||||
const { from, to, type } = modelValue.value || {};
|
||||
if (!from && !to && !type) return '';
|
||||
return type || DATE_RANGE_TYPES.CUSTOM;
|
||||
});
|
||||
|
||||
const menuItems = computed(() =>
|
||||
PRESET_RANGES.value.map(item => ({
|
||||
...item,
|
||||
action: DATE_FILTER_ACTIONS.PRESET,
|
||||
isSelected: selectedValue.value === item.value,
|
||||
}))
|
||||
);
|
||||
|
||||
const applySelection = ({ type, from, to }) => {
|
||||
const newValue = { type, from, to };
|
||||
modelValue.value = newValue;
|
||||
emit('change', newValue);
|
||||
};
|
||||
|
||||
const clearFilter = () => {
|
||||
applySelection({ type: null, from: null, to: null });
|
||||
customFrom.value = '';
|
||||
customTo.value = '';
|
||||
toggleDropdown(false);
|
||||
};
|
||||
|
||||
const handlePresetAction = item => {
|
||||
if (selectedValue.value === item.value) {
|
||||
clearFilter();
|
||||
return;
|
||||
}
|
||||
customFrom.value = '';
|
||||
customTo.value = '';
|
||||
applySelection(computeDateRange(item));
|
||||
toggleDropdown(false);
|
||||
};
|
||||
|
||||
const applyCustomRange = () => {
|
||||
const customFromDate = customFrom.value
|
||||
? startOfDay(new Date(customFrom.value))
|
||||
: null;
|
||||
const customToDate = customTo.value
|
||||
? endOfDay(new Date(customTo.value))
|
||||
: null;
|
||||
|
||||
// Only BETWEEN mode - require both dates
|
||||
if (customFromDate && customToDate) {
|
||||
applySelection({
|
||||
type: DATE_RANGE_TYPES.BETWEEN,
|
||||
from: getUnixTime(customFromDate),
|
||||
to: getUnixTime(customToDate),
|
||||
});
|
||||
toggleDropdown(false);
|
||||
}
|
||||
};
|
||||
|
||||
const clearCustomRange = () => {
|
||||
customFrom.value = '';
|
||||
customTo.value = '';
|
||||
};
|
||||
|
||||
const formatDate = timestamp => format(fromUnixTime(timestamp), 'MMM d, yyyy'); // (e.g., "Jan 15, 2024")
|
||||
|
||||
const selectedLabel = computed(() => {
|
||||
const prefix = t('SEARCH.DATE_RANGE.TIME_RANGE');
|
||||
if (!selectedValue.value) return prefix;
|
||||
|
||||
// Check if it's a preset
|
||||
const preset = PRESET_RANGES.value.find(p => p.value === selectedValue.value);
|
||||
if (preset) return `${prefix}: ${preset.label}`;
|
||||
|
||||
// Custom range - only BETWEEN mode with both dates
|
||||
const { from, to } = modelValue.value;
|
||||
if (from && to) return `${prefix}: ${formatDate(from)} - ${formatDate(to)}`;
|
||||
|
||||
return `${prefix}: ${t('SEARCH.DATE_RANGE.CUSTOM_RANGE')}`;
|
||||
});
|
||||
|
||||
const CUSTOM_RANGE_TYPES = [DATE_RANGE_TYPES.BETWEEN, DATE_RANGE_TYPES.CUSTOM];
|
||||
|
||||
const onToggleDropdown = () => {
|
||||
if (!showDropdown.value) {
|
||||
const { type, from, to } = modelValue.value || {};
|
||||
|
||||
rangeType.value = CUSTOM_RANGE_TYPES.includes(type)
|
||||
? type
|
||||
: DATE_RANGE_TYPES.BETWEEN;
|
||||
|
||||
if (CUSTOM_RANGE_TYPES.includes(type)) {
|
||||
try {
|
||||
customFrom.value = from ? format(fromUnixTime(from), 'yyyy-MM-dd') : '';
|
||||
customTo.value = to ? format(fromUnixTime(to), 'yyyy-MM-dd') : '';
|
||||
} catch {
|
||||
customFrom.value = '';
|
||||
customTo.value = '';
|
||||
}
|
||||
} else {
|
||||
customFrom.value = '';
|
||||
customTo.value = '';
|
||||
}
|
||||
}
|
||||
toggleDropdown();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-on-click-outside="() => toggleDropdown(false)"
|
||||
class="relative flex items-center group min-w-0 max-w-full"
|
||||
>
|
||||
<Button
|
||||
sm
|
||||
slate
|
||||
:variant="showDropdown ? 'faded' : 'solid'"
|
||||
:label="selectedLabel"
|
||||
class="group-hover:bg-n-alpha-2 max-w-full"
|
||||
trailing-icon
|
||||
icon="i-lucide-chevron-down"
|
||||
@click="onToggleDropdown()"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showDropdown"
|
||||
:menu-items="menuItems"
|
||||
class="mt-1 ltr:left-0 rtl:right-0 top-full w-64"
|
||||
@action="handlePresetAction"
|
||||
>
|
||||
<template #footer>
|
||||
<div class="h-px bg-n-strong" />
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between gap-2 px-1 h-9">
|
||||
<span class="text-sm text-n-slate-11">
|
||||
{{ t('SEARCH.DATE_RANGE.CUSTOM_RANGE') }}
|
||||
</span>
|
||||
<span class="text-sm text-n-slate-12">
|
||||
{{ t('SEARCH.DATE_RANGE.CREATED_BETWEEN') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
v-model="customFrom"
|
||||
type="date"
|
||||
:min="minDate"
|
||||
:max="customTo || maxDate"
|
||||
class="!w-full !mb-0 !rounded-lg !bg-n-alpha-black2 !outline-n-strong -outline-offset-1 !px-3 !py-2 !text-sm text-n-slate-12 !h-8"
|
||||
/>
|
||||
|
||||
<div class="flex items-center gap-3 h-5 px-1">
|
||||
<div class="flex-1 h-px bg-n-weak" />
|
||||
<span class="text-sm text-n-slate-11">
|
||||
{{ t('SEARCH.DATE_RANGE.AND') }}
|
||||
</span>
|
||||
<div class="flex-1 h-px bg-n-weak" />
|
||||
</div>
|
||||
|
||||
<input
|
||||
v-model="customTo"
|
||||
type="date"
|
||||
:min="customFrom || minDate"
|
||||
:max="maxDate"
|
||||
class="!w-full !mb-0 !rounded-lg !bg-n-alpha-black2 !outline-n-strong -outline-offset-1 !px-3 !py-2 !text-sm text-n-slate-12 !h-8"
|
||||
/>
|
||||
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<Button
|
||||
sm
|
||||
slate
|
||||
faded
|
||||
:label="t('SEARCH.DATE_RANGE.CLEAR_FILTER')"
|
||||
:disabled="!hasCustomDates"
|
||||
class="flex-1 justify-center"
|
||||
@click="clearCustomRange"
|
||||
/>
|
||||
<Button
|
||||
sm
|
||||
solid
|
||||
color="blue"
|
||||
:label="t('SEARCH.DATE_RANGE.APPLY')"
|
||||
:disabled="!hasCustomDates"
|
||||
class="flex-1 justify-center"
|
||||
@click="applyCustomRange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,104 @@
|
||||
<script setup>
|
||||
import { computed, defineModel } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import SearchDateRangeSelector from './SearchDateRangeSelector.vue';
|
||||
import SearchContactAgentSelector from './SearchContactAgentSelector.vue';
|
||||
import SearchInboxSelector from './SearchInboxSelector.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const emit = defineEmits(['updateFilters']);
|
||||
const { t } = useI18n();
|
||||
|
||||
const filters = defineModel({
|
||||
type: Object,
|
||||
default: () => ({
|
||||
from: null, // Contact id and Agent id
|
||||
in: null, // Inbox id
|
||||
dateRange: { type: null, from: null, to: null },
|
||||
}),
|
||||
});
|
||||
|
||||
const hasActiveFilters = computed(
|
||||
() =>
|
||||
filters.value.from ||
|
||||
filters.value.in ||
|
||||
filters.value.dateRange?.type ||
|
||||
filters.value.dateRange?.from ||
|
||||
filters.value.dateRange?.to
|
||||
);
|
||||
|
||||
const onFilterChange = () => {
|
||||
emit('updateFilters', filters.value);
|
||||
};
|
||||
|
||||
const clearAllFilters = () => {
|
||||
filters.value = {
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: { type: null, from: null, to: null },
|
||||
};
|
||||
onFilterChange();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col lg:flex-row items-start lg:items-center gap-3 p-4 w-full min-w-0"
|
||||
>
|
||||
<div class="flex items-center gap-3 min-w-0 max-w-full">
|
||||
<Button
|
||||
v-if="hasActiveFilters"
|
||||
sm
|
||||
slate
|
||||
solid
|
||||
:label="t('SEARCH.DATE_RANGE.CLEAR_FILTER')"
|
||||
icon="i-lucide-x"
|
||||
class="flex-shrink-0 lg:hidden"
|
||||
@click="clearAllFilters"
|
||||
/>
|
||||
|
||||
<SearchDateRangeSelector
|
||||
v-model="filters.dateRange"
|
||||
class="min-w-0 max-w-full"
|
||||
@change="onFilterChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-px h-4 bg-n-weak flex-shrink-0 hidden lg:block" />
|
||||
|
||||
<div class="flex items-center gap-1.5 min-w-0 flex-1 max-w-full">
|
||||
<span class="text-sm text-n-slate-10 flex-shrink-0 whitespace-nowrap">
|
||||
{{ t('SEARCH.FILTERS.FILTER_MESSAGE') }}
|
||||
</span>
|
||||
|
||||
<div class="min-w-0">
|
||||
<SearchContactAgentSelector
|
||||
v-model="filters.from"
|
||||
:label="$t('SEARCH.FILTERS.FROM')"
|
||||
@change="onFilterChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-px h-3 bg-n-weak rounded-lg flex-shrink-0" />
|
||||
|
||||
<div class="min-w-0">
|
||||
<SearchInboxSelector
|
||||
v-model="filters.in"
|
||||
:label="$t('SEARCH.FILTERS.IN')"
|
||||
@change="onFilterChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
v-if="hasActiveFilters"
|
||||
sm
|
||||
slate
|
||||
solid
|
||||
:label="t('SEARCH.DATE_RANGE.CLEAR_FILTER')"
|
||||
icon="i-lucide-x"
|
||||
class="flex-shrink-0 hidden lg:inline-flex"
|
||||
@click="clearAllFilters"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,48 +1,34 @@
|
||||
<script setup>
|
||||
import { ref, useTemplateRef, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { debounce } from '@chatwoot/utils';
|
||||
import { ref, watch, useTemplateRef, defineModel } from 'vue';
|
||||
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
|
||||
import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
|
||||
import { ROLES } from 'dashboard/constants/permissions';
|
||||
|
||||
import SearchInput from './SearchInput.vue';
|
||||
import SearchFilters from './SearchFilters.vue';
|
||||
import Policy from 'dashboard/components/policy.vue';
|
||||
|
||||
const props = defineProps({
|
||||
initialQuery: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
initialQuery: { type: String, default: '' },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['search']);
|
||||
const emit = defineEmits(['search', 'filterChange']);
|
||||
|
||||
const filters = defineModel('filters', { type: Object, default: () => ({}) });
|
||||
|
||||
const searchInputRef = useTemplateRef('searchInputRef');
|
||||
const searchQuery = ref(props.initialQuery);
|
||||
const isInputFocused = ref(false);
|
||||
|
||||
const searchInput = useTemplateRef('searchInput');
|
||||
|
||||
const handler = e => {
|
||||
if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
|
||||
e.preventDefault();
|
||||
searchInput.value.focus();
|
||||
} else if (e.key === 'Escape' && document.activeElement.tagName === 'INPUT') {
|
||||
e.preventDefault();
|
||||
searchInput.value.blur();
|
||||
const onSearch = query => {
|
||||
if (query?.trim() && searchInputRef.value) {
|
||||
searchInputRef.value.addToRecentSearches(query.trim());
|
||||
}
|
||||
emit('search', query);
|
||||
};
|
||||
|
||||
const debouncedEmit = debounce(
|
||||
value =>
|
||||
emit('search', value.length > 1 || value.match(/^[0-9]+$/) ? value : ''),
|
||||
500
|
||||
);
|
||||
|
||||
const onInput = e => {
|
||||
searchQuery.value = e.target.value;
|
||||
debouncedEmit(searchQuery.value);
|
||||
};
|
||||
|
||||
const onFocus = () => {
|
||||
isInputFocused.value = true;
|
||||
};
|
||||
|
||||
const onBlur = () => {
|
||||
isInputFocused.value = false;
|
||||
const onSelectRecentSearch = query => {
|
||||
searchQuery.value = query;
|
||||
onSearch(query);
|
||||
};
|
||||
|
||||
watch(
|
||||
@@ -54,51 +40,30 @@ watch(
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
searchInput.value.focus();
|
||||
document.addEventListener('keydown', handler);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handler);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="input-container rounded-xl transition-[border-bottom] duration-[0.2s] ease-[ease-in-out] relative flex items-center py-2 px-4 h-14 gap-2 border border-solid bg-n-alpha-black2"
|
||||
:class="{
|
||||
'border-n-brand': isInputFocused,
|
||||
'border-n-weak': !isInputFocused,
|
||||
}"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<fluent-icon
|
||||
icon="search"
|
||||
class="icon"
|
||||
aria-hidden="true"
|
||||
:class="{
|
||||
'text-n-blue-text': isInputFocused,
|
||||
'text-n-slate-10': !isInputFocused,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
ref="searchInput"
|
||||
type="search"
|
||||
class="reset-base outline-none w-full m-0 bg-transparent border-transparent shadow-none text-n-slate-12 dark:text-n-slate-12 active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none"
|
||||
:placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
|
||||
:value="searchQuery"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@input="onInput"
|
||||
/>
|
||||
<woot-label
|
||||
:title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
|
||||
:show-close="false"
|
||||
small
|
||||
class="!m-0 whitespace-nowrap !bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong"
|
||||
/>
|
||||
<div class="flex flex-col gap-2">
|
||||
<SearchInput
|
||||
ref="searchInputRef"
|
||||
v-model="searchQuery"
|
||||
@search="onSearch"
|
||||
@select-recent-search="onSelectRecentSearch"
|
||||
>
|
||||
<Policy
|
||||
:permissions="ROLES"
|
||||
:installation-types="[
|
||||
INSTALLATION_TYPES.ENTERPRISE,
|
||||
INSTALLATION_TYPES.CLOUD,
|
||||
]"
|
||||
:feature-flag="FEATURE_FLAGS.ADVANCED_SEARCH"
|
||||
class="w-full"
|
||||
>
|
||||
<SearchFilters
|
||||
v-model="filters"
|
||||
@update-filters="$emit('filterChange', $event)"
|
||||
/>
|
||||
</Policy>
|
||||
</SearchInput>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
<script setup>
|
||||
import { ref, computed, defineModel } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
import { useMapGetter } from 'dashboard/composables/store.js';
|
||||
import { useCamelCase } from 'dashboard/composables/useTransformKeys';
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
const modelValue = defineModel({
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
});
|
||||
|
||||
const MENU_ITEM_TYPES = {
|
||||
INBOX: 'inbox',
|
||||
};
|
||||
|
||||
const MENU_ACTIONS = {
|
||||
SELECT: 'select',
|
||||
};
|
||||
|
||||
const { t } = useI18n();
|
||||
const [showDropdown, toggleDropdown] = useToggle();
|
||||
|
||||
const searchQuery = ref('');
|
||||
|
||||
const inboxesList = useMapGetter('inboxes/getInboxes');
|
||||
|
||||
const inboxesSection = computed(() => {
|
||||
const inboxes = inboxesList.value?.map(inbox => {
|
||||
const transformedInbox = useCamelCase(inbox, { deep: true });
|
||||
return {
|
||||
label: transformedInbox.name,
|
||||
value: transformedInbox.id,
|
||||
action: MENU_ACTIONS.SELECT,
|
||||
type: MENU_ITEM_TYPES.INBOX,
|
||||
thumbnail: {
|
||||
name: transformedInbox.name,
|
||||
src: transformedInbox.avatarUrl,
|
||||
},
|
||||
isSelected: modelValue.value === transformedInbox.id,
|
||||
};
|
||||
});
|
||||
|
||||
if (!searchQuery.value) return inboxes;
|
||||
|
||||
return inboxes.filter(inbox =>
|
||||
inbox.label.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
const menuSections = computed(() => {
|
||||
return [
|
||||
{
|
||||
title: t('SEARCH.FILTERS.INBOXES'),
|
||||
items: inboxesSection.value,
|
||||
emptyState: t('SEARCH.FILTERS.NO_INBOXES'),
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const selectedLabel = computed(() => {
|
||||
if (!modelValue.value) return props.label;
|
||||
|
||||
// Find the selected inbox
|
||||
const inbox = inboxesList.value?.find(i => i.id === modelValue.value);
|
||||
if (inbox) return `${props.label}: ${inbox.name}`;
|
||||
|
||||
return `${props.label}: ${modelValue.value}`;
|
||||
});
|
||||
|
||||
const handleAction = item => {
|
||||
if (modelValue.value === item.value) {
|
||||
modelValue.value = null;
|
||||
} else {
|
||||
modelValue.value = item.value;
|
||||
}
|
||||
toggleDropdown(false);
|
||||
emit('change');
|
||||
};
|
||||
|
||||
const onToggleDropdown = () => {
|
||||
if (!showDropdown.value) {
|
||||
searchQuery.value = '';
|
||||
}
|
||||
toggleDropdown();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-on-click-outside="() => toggleDropdown(false)"
|
||||
class="relative flex items-center group min-w-0 max-w-full"
|
||||
>
|
||||
<Button
|
||||
sm
|
||||
:variant="showDropdown ? 'faded' : 'ghost'"
|
||||
slate
|
||||
:label="selectedLabel"
|
||||
trailing-icon
|
||||
icon="i-lucide-chevron-down"
|
||||
class="!px-2 max-w-full"
|
||||
@click="onToggleDropdown"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showDropdown"
|
||||
:menu-sections="menuSections"
|
||||
show-search
|
||||
disable-local-filtering
|
||||
class="mt-1 ltr:right-0 rtl:left-0 top-full w-64 max-h-80 overflow-y-auto"
|
||||
@search="searchQuery = $event"
|
||||
@action="handleAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,136 @@
|
||||
<script setup>
|
||||
import { ref, useTemplateRef, onMounted, onUnmounted } from 'vue';
|
||||
import { debounce } from '@chatwoot/utils';
|
||||
import RecentSearches from './RecentSearches.vue';
|
||||
|
||||
const emit = defineEmits(['search', 'selectRecentSearch']);
|
||||
|
||||
const searchQuery = defineModel({
|
||||
type: String,
|
||||
default: '',
|
||||
});
|
||||
const isInputFocused = ref(false);
|
||||
const showRecentSearches = ref(false);
|
||||
const searchInput = useTemplateRef('searchInput');
|
||||
const recentSearchesRef = useTemplateRef('recentSearchesRef');
|
||||
|
||||
const handler = e => {
|
||||
if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
|
||||
e.preventDefault();
|
||||
searchInput.value.focus();
|
||||
} else if (e.key === 'Escape' && document.activeElement.tagName === 'INPUT') {
|
||||
e.preventDefault();
|
||||
searchInput.value.blur();
|
||||
}
|
||||
};
|
||||
|
||||
const debouncedEmit = debounce(
|
||||
value =>
|
||||
emit('search', value.length > 1 || value.match(/^[0-9]+$/) ? value : ''),
|
||||
500
|
||||
);
|
||||
|
||||
const onInput = () => {
|
||||
debouncedEmit(searchQuery.value);
|
||||
|
||||
if (searchQuery.value.trim()) {
|
||||
showRecentSearches.value = false;
|
||||
} else if (isInputFocused.value) {
|
||||
showRecentSearches.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onFocus = () => {
|
||||
isInputFocused.value = true;
|
||||
if (!searchQuery.value.trim()) {
|
||||
showRecentSearches.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onBlur = () => {
|
||||
isInputFocused.value = false;
|
||||
showRecentSearches.value = false;
|
||||
};
|
||||
|
||||
const onSelectRecentSearch = query => {
|
||||
searchQuery.value = query;
|
||||
emit('selectRecentSearch', query);
|
||||
showRecentSearches.value = false;
|
||||
searchInput.value.focus();
|
||||
};
|
||||
|
||||
const addToRecentSearches = query => {
|
||||
if (recentSearchesRef.value) {
|
||||
recentSearchesRef.value.addRecentSearch(query);
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
addToRecentSearches,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
searchInput.value.focus();
|
||||
document.addEventListener('keydown', handler);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handler);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="rounded-xl transition-[border-bottom] duration-[0.2s] ease-[ease-in-out] relative flex items-start flex-col border border-solid bg-n-solid-1 divide-y divide-n-strong"
|
||||
:class="{
|
||||
'border-n-brand': isInputFocused,
|
||||
'border-n-strong': !isInputFocused,
|
||||
}"
|
||||
>
|
||||
<div class="flex items-center w-full h-[3.25rem] px-4 gap-2">
|
||||
<div class="flex items-center">
|
||||
<fluent-icon
|
||||
icon="search"
|
||||
class="icon"
|
||||
aria-hidden="true"
|
||||
:class="{
|
||||
'text-n-blue-text': isInputFocused,
|
||||
'text-n-slate-10': !isInputFocused,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
ref="searchInput"
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
class="reset-base outline-none w-full m-0 bg-transparent border-transparent shadow-none text-n-slate-12 dark:text-n-slate-12 active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none placeholder:text-n-slate-10 text-base"
|
||||
:placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@input="onInput"
|
||||
/>
|
||||
<span class="text-sm text-n-slate-10 flex-shrink-0">
|
||||
{{ $t('SEARCH.PLACEHOLDER_KEYBINDING') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
|
||||
<div
|
||||
class="transition-all duration-200 ease-out grid overflow-hidden w-full !border-t-0"
|
||||
:class="
|
||||
showRecentSearches
|
||||
? 'grid-rows-[1fr] opacity-100'
|
||||
: 'grid-rows-[0fr] opacity-0'
|
||||
"
|
||||
>
|
||||
<div class="overflow-hidden w-full">
|
||||
<RecentSearches
|
||||
ref="recentSearchesRef"
|
||||
@select-search="onSelectRecentSearch"
|
||||
@clear-all="showRecentSearches = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,7 +1,10 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import Icon from 'next/icon/Icon.vue';
|
||||
import { frontendURL } from 'dashboard/helper/URLHelper';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
import { ARTICLE_STATUSES } from 'dashboard/helper/portalHelper';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import MessageFormatter from 'shared/helpers/MessageFormatter';
|
||||
|
||||
const props = defineProps({
|
||||
@@ -13,6 +16,8 @@ const props = defineProps({
|
||||
content: { type: String, default: '' },
|
||||
portalSlug: { type: String, required: true },
|
||||
accountId: { type: [String, Number], default: 0 },
|
||||
status: { type: String, default: '' },
|
||||
updatedAt: { type: Number, default: 0 },
|
||||
});
|
||||
|
||||
const MAX_LENGTH = 300;
|
||||
@@ -23,6 +28,11 @@ const navigateTo = computed(() => {
|
||||
);
|
||||
});
|
||||
|
||||
const updatedAtTime = computed(() => {
|
||||
if (!props.updatedAt) return '';
|
||||
return dynamicTime(props.updatedAt);
|
||||
});
|
||||
|
||||
const truncatedContent = computed(() => {
|
||||
if (!props.content) return props.description || '';
|
||||
|
||||
@@ -34,36 +44,62 @@ const truncatedContent = computed(() => {
|
||||
? `${plainText.substring(0, MAX_LENGTH)}...`
|
||||
: plainText;
|
||||
});
|
||||
|
||||
const statusTextColor = computed(() => {
|
||||
switch (props.status) {
|
||||
case ARTICLE_STATUSES.ARCHIVED:
|
||||
return 'text-n-slate-12';
|
||||
case ARTICLE_STATUSES.DRAFT:
|
||||
return 'text-n-amber-11';
|
||||
default:
|
||||
return 'text-n-teal-11';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link
|
||||
:to="navigateTo"
|
||||
class="flex items-start p-2 rounded-xl cursor-pointer hover:bg-n-slate-2"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-center w-6 h-6 mt-0.5 rounded bg-n-slate-3"
|
||||
<router-link :to="navigateTo">
|
||||
<CardLayout
|
||||
layout="col"
|
||||
class="[&>div]:justify-start [&>div]:gap-2 [&>div]:px-4 [&>div]:pt-4 [&>div]:pb-5 [&>div]:items-start hover:bg-n-slate-2 dark:hover:bg-n-solid-3"
|
||||
>
|
||||
<Icon icon="i-lucide-library-big" class="text-n-slate-10" />
|
||||
</div>
|
||||
<div class="ltr:ml-2 rtl:mr-2 min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<h5 class="text-sm font-medium truncate min-w-0 text-n-slate-12">
|
||||
{{ title }}
|
||||
</h5>
|
||||
<span
|
||||
v-if="category"
|
||||
class="text-xs font-medium whitespace-nowrap capitalize bg-n-slate-3 px-1 py-0.5 rounded text-n-slate-10"
|
||||
<div class="min-w-0 flex-1 flex flex-col items-start gap-2 w-full">
|
||||
<div class="flex items-center min-w-0 justify-between gap-2 w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<h5
|
||||
class="text-sm font-medium leading-4 truncate min-w-0 text-n-slate-12"
|
||||
>
|
||||
{{ title }}
|
||||
</h5>
|
||||
<div v-if="category" class="w-px h-4 bg-n-strong mx-2" />
|
||||
<span
|
||||
v-if="category"
|
||||
class="text-xs inline-flex items-center font-medium rounded-md whitespace-nowrap capitalize bg-n-alpha-2 px-1.5 h-6 text-n-slate-12"
|
||||
>
|
||||
{{ category }}
|
||||
</span>
|
||||
<span
|
||||
v-if="status"
|
||||
class="text-xs inline-flex items-center font-medium rounded-md whitespace-nowrap capitalize bg-n-alpha-2 px-2 h-6"
|
||||
:class="statusTextColor"
|
||||
>
|
||||
{{ status }}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="updatedAtTime"
|
||||
class="text-sm font-normal min-w-0 truncate text-n-slate-11"
|
||||
>
|
||||
{{ updatedAtTime }}
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
v-if="truncatedContent"
|
||||
class="text-sm leading-6 text-n-slate-11 line-clamp-2"
|
||||
>
|
||||
{{ category }}
|
||||
</span>
|
||||
{{ truncatedContent }}
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
v-if="truncatedContent"
|
||||
class="mt-1 text-sm text-n-slate-11 line-clamp-2"
|
||||
>
|
||||
{{ truncatedContent }}
|
||||
</p>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
@@ -34,18 +34,19 @@ const accountId = useMapGetter('getCurrentAccountId');
|
||||
:show-title="showTitle"
|
||||
:is-fetching="isFetching"
|
||||
>
|
||||
<ul v-if="articles.length" class="space-y-1.5 list-none">
|
||||
<ul v-if="articles.length" class="space-y-3 list-none">
|
||||
<li v-for="article in articles" :key="article.id">
|
||||
<SearchResultArticleItem
|
||||
:id="article.id"
|
||||
:title="article.title"
|
||||
:description="article.description"
|
||||
:content="article.content"
|
||||
:portal-slug="article.portal_slug"
|
||||
:portal-slug="article.portalSlug"
|
||||
:locale="article.locale"
|
||||
:account-id="accountId"
|
||||
:category="article.category_name"
|
||||
:category="article.categoryName"
|
||||
:status="article.status"
|
||||
:updated-at="article.updatedAt"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { frontendURL } from 'dashboard/helper/URLHelper';
|
||||
import countries from 'shared/constants/countries';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
import Flag from 'dashboard/components-next/flag/Flag.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
@@ -29,38 +33,122 @@ const props = defineProps({
|
||||
type: [String, Number],
|
||||
default: 0,
|
||||
},
|
||||
additionalAttributes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
updatedAt: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const navigateTo = computed(() => {
|
||||
return frontendURL(`accounts/${props.accountId}/contacts/${props.id}`);
|
||||
});
|
||||
|
||||
const countriesMap = computed(() => {
|
||||
return countries.reduce((acc, country) => {
|
||||
acc[country.code] = country;
|
||||
acc[country.id] = country;
|
||||
return acc;
|
||||
}, {});
|
||||
});
|
||||
|
||||
const updatedAtTime = computed(() => {
|
||||
if (!props.updatedAt) return '';
|
||||
return dynamicTime(props.updatedAt);
|
||||
});
|
||||
|
||||
const countryDetails = computed(() => {
|
||||
const { country, countryCode, city } = props.additionalAttributes;
|
||||
|
||||
if (!country && !countryCode) return null;
|
||||
|
||||
const activeCountry =
|
||||
countriesMap.value[country] || countriesMap.value[countryCode];
|
||||
|
||||
if (!activeCountry) return null;
|
||||
|
||||
return {
|
||||
countryCode: activeCountry.id,
|
||||
city: city ? `${city},` : null,
|
||||
name: activeCountry.name,
|
||||
};
|
||||
});
|
||||
|
||||
const formattedLocation = computed(() => {
|
||||
if (!countryDetails.value) return '';
|
||||
|
||||
return [countryDetails.value.city, countryDetails.value.name]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link
|
||||
:to="navigateTo"
|
||||
class="flex items-start p-2 rounded-xl cursor-pointer hover:bg-n-slate-2"
|
||||
>
|
||||
<Avatar
|
||||
:name="name"
|
||||
:src="thumbnail"
|
||||
:size="24"
|
||||
rounded-full
|
||||
class="mt-0.5"
|
||||
/>
|
||||
<div class="ml-2 rtl:mr-2 min-w-0 rtl:ml-0">
|
||||
<h5 class="text-sm name truncate min-w-0 text-n-slate-12">
|
||||
{{ name }}
|
||||
</h5>
|
||||
<p
|
||||
class="grid items-center m-0 gap-1 text-sm grid-cols-[minmax(0,1fr)_auto_auto]"
|
||||
>
|
||||
<span v-if="email" class="truncate text-n-slate-12" :title="email">
|
||||
{{ email }}
|
||||
</span>
|
||||
<span v-if="phone" class="text-n-slate-10">•</span>
|
||||
<span v-if="phone" class="text-n-slate-12">{{ phone }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<router-link :to="navigateTo">
|
||||
<CardLayout
|
||||
layout="row"
|
||||
class="[&>div]:justify-start [&>div]:px-4 [&>div]:py-3 [&>div]:items-start hover:bg-n-slate-2 dark:hover:bg-n-solid-3"
|
||||
>
|
||||
<Avatar
|
||||
:name="name"
|
||||
:src="thumbnail"
|
||||
:size="24"
|
||||
rounded-full
|
||||
class="mt-1 flex-shrink-0"
|
||||
/>
|
||||
<div class="min-w-0 flex flex-col items-start gap-1.5 w-full">
|
||||
<div class="flex items-center min-w-0 justify-between gap-2 w-full">
|
||||
<h5 class="text-sm font-medium truncate min-w-0 text-n-slate-12 py-1">
|
||||
{{ name }}
|
||||
</h5>
|
||||
<span
|
||||
v-if="updatedAtTime"
|
||||
class="text-sm font-normal min-w-0 truncate text-n-slate-11"
|
||||
>
|
||||
{{ $t('SEARCH.UPDATED_AT', { time: updatedAtTime }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="grid items-center gap-3 m-0 text-sm overflow-hidden min-w-0 grid-cols-[minmax(0,max-content)_auto_minmax(0,max-content)_auto_minmax(0,max-content)]"
|
||||
>
|
||||
<span
|
||||
v-if="email"
|
||||
class="truncate text-n-slate-11 min-w-0"
|
||||
:title="email"
|
||||
>
|
||||
{{ email }}
|
||||
</span>
|
||||
|
||||
<div v-if="email && phone" class="w-px h-3 bg-n-slate-6 rounded" />
|
||||
|
||||
<span
|
||||
v-if="phone"
|
||||
:title="phone"
|
||||
class="truncate text-n-slate-11 min-w-0"
|
||||
>
|
||||
{{ phone }}
|
||||
</span>
|
||||
|
||||
<div
|
||||
v-if="(email || phone) && countryDetails"
|
||||
class="w-px h-3 bg-n-slate-6 rounded"
|
||||
/>
|
||||
|
||||
<span
|
||||
v-if="countryDetails"
|
||||
class="truncate text-n-slate-11 flex items-center gap-1 min-w-0"
|
||||
>
|
||||
<Flag
|
||||
:country="countryDetails.countryCode"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
<span class="truncate min-w-0">{{ formattedLocation }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
@@ -34,15 +34,17 @@ const accountId = useMapGetter('getCurrentAccountId');
|
||||
:show-title="showTitle"
|
||||
:is-fetching="isFetching"
|
||||
>
|
||||
<ul v-if="contacts.length" class="space-y-1.5 list-none">
|
||||
<ul v-if="contacts.length" class="space-y-3 list-none">
|
||||
<li v-for="contact in contacts" :key="contact.id">
|
||||
<SearchResultContactItem
|
||||
:id="contact.id"
|
||||
:name="contact.name"
|
||||
:email="contact.email"
|
||||
:phone="contact.phone_number"
|
||||
:phone="contact.phoneNumber"
|
||||
:additional-attributes="contact.additionalAttributes"
|
||||
:account-id="accountId"
|
||||
:thumbnail="contact.thumbnail"
|
||||
:updated-at="contact.lastActivityAt"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { frontendURL } from 'dashboard/helper/URLHelper.js';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
import InboxName from 'dashboard/components/widgets/InboxName.vue';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
import { useInbox } from 'dashboard/composables/useInbox';
|
||||
import { getInboxIconByType } from 'dashboard/helper/inbox';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
@@ -41,6 +43,8 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const { inbox } = useInbox(props.inbox?.id);
|
||||
|
||||
const navigateTo = computed(() => {
|
||||
const params = {};
|
||||
if (props.messageId) {
|
||||
@@ -52,7 +56,10 @@ const navigateTo = computed(() => {
|
||||
);
|
||||
});
|
||||
|
||||
const createdAtTime = dynamicTime(props.createdAt);
|
||||
const createdAtTime = computed(() => {
|
||||
if (!props.createdAt) return '';
|
||||
return dynamicTime(props.createdAt);
|
||||
});
|
||||
|
||||
const infoItems = computed(() => [
|
||||
{
|
||||
@@ -75,58 +82,76 @@ const infoItems = computed(() => [
|
||||
const visibleInfoItems = computed(() =>
|
||||
infoItems.value.filter(item => item.show)
|
||||
);
|
||||
|
||||
const inboxName = computed(() => props.inbox?.name);
|
||||
|
||||
const inboxIcon = computed(() => {
|
||||
if (!inbox.value) return null;
|
||||
const { channelType, medium } = inbox.value;
|
||||
return getInboxIconByType(channelType, medium);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link
|
||||
:to="navigateTo"
|
||||
class="flex p-2 rounded-xl cursor-pointer hover:bg-n-slate-2"
|
||||
>
|
||||
<Avatar
|
||||
name="chats"
|
||||
:size="24"
|
||||
icon-name="i-lucide-messages-square"
|
||||
class="[&>span]:rounded"
|
||||
/>
|
||||
<div class="flex-grow min-w-0 ml-2">
|
||||
<div class="flex items-center min-w-0 justify-between gap-1 mb-1">
|
||||
<div class="flex">
|
||||
<woot-label
|
||||
class="!bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong m-0"
|
||||
:title="`#${id}`"
|
||||
:show-close="false"
|
||||
small
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-center h-5 ml-1 rounded bg-n-slate-3 dark:bg-n-solid-3 w-fit rtl:ml-0 rtl:mr-1"
|
||||
>
|
||||
<InboxName
|
||||
:inbox="inbox"
|
||||
class="mx-2 bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-11 dark:text-n-slate-11"
|
||||
<router-link :to="navigateTo">
|
||||
<CardLayout
|
||||
layout="col"
|
||||
class="[&>div]:justify-start [&>div]:gap-2 [&>div]:px-4 [&>div]:py-3 [&>div]:items-start hover:bg-n-slate-2 dark:hover:bg-n-solid-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center min-w-0 justify-between gap-2 w-full h-7 mb-1"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<Icon
|
||||
icon="i-lucide-hash"
|
||||
class="flex-shrink-0 text-n-slate-11 size-4"
|
||||
/>
|
||||
<span class="text-n-slate-12 text-sm leading-4">
|
||||
{{ id }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="inboxName" class="w-px h-3 bg-n-strong" />
|
||||
<div v-if="inboxName" class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<div
|
||||
v-if="inboxIcon"
|
||||
class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-4"
|
||||
>
|
||||
<Icon
|
||||
:icon="inboxIcon"
|
||||
class="flex-shrink-0 text-n-slate-11 size-2.5"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-sm leading-4 text-n-slate-12">
|
||||
{{ inboxName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="text-xs font-normal min-w-0 truncate text-n-slate-11 dark:text-n-slate-11"
|
||||
v-if="createdAtTime"
|
||||
class="text-sm font-normal min-w-0 truncate text-n-slate-11"
|
||||
>
|
||||
{{ createdAtTime }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-2 gap-y-1.5">
|
||||
<h5
|
||||
v-for="item in visibleInfoItems"
|
||||
:key="item.label"
|
||||
class="m-0 text-sm min-w-0 text-n-slate-12 dark:text-n-slate-12 truncate"
|
||||
<div class="flex flex-wrap gap-x-2 gap-y-1.5 items-center">
|
||||
<template
|
||||
v-for="(item, index) in visibleInfoItems"
|
||||
:key="`info-${index}`"
|
||||
>
|
||||
<span
|
||||
class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
|
||||
>
|
||||
{{ $t(item.label) }}:
|
||||
</span>
|
||||
{{ item.value }}
|
||||
</h5>
|
||||
<h5 class="m-0 text-sm min-w-0 text-n-slate-12 truncate">
|
||||
<span class="text-sm leading-4 font-normal text-n-slate-11">
|
||||
{{ $t(item.label) + ':' }}
|
||||
</span>
|
||||
{{ item.value }}
|
||||
</h5>
|
||||
<div
|
||||
v-if="index < visibleInfoItems.length - 1"
|
||||
class="w-px h-3 bg-n-strong"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</CardLayout>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
import { defineProps, computed } from 'vue';
|
||||
import { useMapGetter } from 'dashboard/composables/store.js';
|
||||
|
||||
import SearchResultSection from './SearchResultSection.vue';
|
||||
import SearchResultConversationItem from './SearchResultConversationItem.vue';
|
||||
|
||||
@@ -28,7 +29,7 @@ const accountId = useMapGetter('getCurrentAccountId');
|
||||
const conversationsWithSubject = computed(() => {
|
||||
return props.conversations.map(conversation => ({
|
||||
...conversation,
|
||||
mail_subject: conversation.additional_attributes?.mail_subject || '',
|
||||
mailSubject: conversation.additionalAttributes?.mailSubject || '',
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
@@ -41,7 +42,7 @@ const conversationsWithSubject = computed(() => {
|
||||
:show-title="showTitle"
|
||||
:is-fetching="isFetching"
|
||||
>
|
||||
<ul v-if="conversations.length" class="space-y-1.5 list-none">
|
||||
<ul v-if="conversations.length" class="space-y-3 list-none">
|
||||
<li
|
||||
v-for="conversation in conversationsWithSubject"
|
||||
:key="conversation.id"
|
||||
@@ -52,8 +53,8 @@ const conversationsWithSubject = computed(() => {
|
||||
:email="conversation.contact.email"
|
||||
:account-id="accountId"
|
||||
:inbox="conversation.inbox"
|
||||
:created-at="conversation.created_at"
|
||||
:email-subject="conversation.mail_subject"
|
||||
:created-at="conversation.createdAt"
|
||||
:email-subject="conversation.mailSubject"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { frontendURL } from 'dashboard/helper/URLHelper.js';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
import { getInboxIconByType } from 'dashboard/helper/inbox';
|
||||
import { useInbox } from 'dashboard/composables/useInbox';
|
||||
import { ATTACHMENT_TYPES } from 'dashboard/components-next/message/constants.js';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import FileChip from 'next/message/chips/File.vue';
|
||||
import AudioChip from 'next/message/chips/Audio.vue';
|
||||
import TranscribedText from './TranscribedText.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
inboxId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
isPrivate: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
accountId: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
createdAt: {
|
||||
type: [String, Date, Number],
|
||||
default: '',
|
||||
},
|
||||
messageId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
attachments: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const { inbox } = useInbox(props.inboxId);
|
||||
|
||||
const navigateTo = computed(() => {
|
||||
const params = {};
|
||||
if (props.messageId) {
|
||||
params.messageId = props.messageId;
|
||||
}
|
||||
return frontendURL(
|
||||
`accounts/${props.accountId}/conversations/${props.id}`,
|
||||
params
|
||||
);
|
||||
});
|
||||
|
||||
const createdAtTime = computed(() => {
|
||||
if (!props.createdAt) return '';
|
||||
return dynamicTime(props.createdAt);
|
||||
});
|
||||
|
||||
const inboxName = computed(() => inbox.value?.name);
|
||||
|
||||
const inboxIcon = computed(() => {
|
||||
if (!inbox.value) return null;
|
||||
const { channelType, medium } = inbox.value;
|
||||
return getInboxIconByType(channelType, medium);
|
||||
});
|
||||
|
||||
const fileAttachments = computed(() => {
|
||||
return props.attachments.filter(
|
||||
attachment => attachment.fileType !== ATTACHMENT_TYPES.AUDIO
|
||||
);
|
||||
});
|
||||
|
||||
const audioAttachments = computed(() => {
|
||||
return props.attachments.filter(
|
||||
attachment => attachment.fileType === ATTACHMENT_TYPES.AUDIO
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link :to="navigateTo">
|
||||
<CardLayout
|
||||
layout="col"
|
||||
class="[&>div]:justify-start [&>div]:gap-2 [&>div]:px-4 [&>div]:py-3 [&>div]:items-start hover:bg-n-slate-2 dark:hover:bg-n-solid-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center min-w-0 justify-between gap-2 w-full h-7 mb-1"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<Icon
|
||||
icon="i-lucide-hash"
|
||||
class="flex-shrink-0 text-n-slate-11 size-4"
|
||||
/>
|
||||
<span class="text-n-slate-12 text-sm leading-4">
|
||||
{{ id }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="inboxName" class="w-px h-3 bg-n-strong" />
|
||||
<div v-if="inboxName" class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<div
|
||||
v-if="inboxIcon"
|
||||
class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-4"
|
||||
>
|
||||
<Icon
|
||||
:icon="inboxIcon"
|
||||
class="flex-shrink-0 text-n-slate-11 size-2.5"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-sm leading-4 text-n-slate-12">
|
||||
{{ inboxName }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isPrivate" class="w-px h-3 bg-n-strong" />
|
||||
<div
|
||||
v-if="isPrivate"
|
||||
class="flex items-center text-n-amber-11 gap-1.5 flex-shrink-0"
|
||||
>
|
||||
<Icon icon="i-lucide-lock-keyhole" class="flex-shrink-0 size-3.5" />
|
||||
<span class="text-sm leading-4">
|
||||
{{ $t('SEARCH.PRIVATE') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
v-if="createdAtTime"
|
||||
class="text-sm font-normal min-w-0 truncate text-n-slate-11"
|
||||
>
|
||||
{{ createdAtTime }}
|
||||
</span>
|
||||
</div>
|
||||
<slot />
|
||||
<div v-if="audioAttachments.length" class="mt-1.5 space-y-4 w-full">
|
||||
<div
|
||||
v-for="attachment in audioAttachments"
|
||||
:key="attachment.id"
|
||||
class="w-full"
|
||||
>
|
||||
<AudioChip
|
||||
class="bg-n-alpha-2 dark:bg-n-alpha-2 text-n-slate-12"
|
||||
:attachment="attachment"
|
||||
:show-transcribed-text="false"
|
||||
@click.prevent
|
||||
/>
|
||||
<div v-if="attachment.transcribedText" class="pt-2">
|
||||
<TranscribedText :text="attachment.transcribedText" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="fileAttachments.length"
|
||||
class="flex gap-2 flex-wrap items-center mt-1.5"
|
||||
>
|
||||
<FileChip
|
||||
v-for="attachment in fileAttachments"
|
||||
:key="attachment.id"
|
||||
:attachment="attachment"
|
||||
class="!h-8"
|
||||
@click.stop
|
||||
/>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</router-link>
|
||||
</template>
|
||||
@@ -2,7 +2,7 @@
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMapGetter } from 'dashboard/composables/store.js';
|
||||
|
||||
import SearchResultConversationItem from './SearchResultConversationItem.vue';
|
||||
import SearchResultMessageItem from './SearchResultMessageItem.vue';
|
||||
import SearchResultSection from './SearchResultSection.vue';
|
||||
import MessageContent from './MessageContent.vue';
|
||||
|
||||
@@ -43,21 +43,23 @@ const getName = message => {
|
||||
:show-title="showTitle"
|
||||
:is-fetching="isFetching"
|
||||
>
|
||||
<ul v-if="messages.length" class="space-y-1.5 list-none">
|
||||
<ul v-if="messages.length" class="space-y-3 list-none">
|
||||
<li v-for="message in messages" :key="message.id">
|
||||
<SearchResultConversationItem
|
||||
:id="message.conversation_id"
|
||||
<SearchResultMessageItem
|
||||
:id="message.conversationId"
|
||||
:account-id="accountId"
|
||||
:inbox="message.inbox"
|
||||
:created-at="message.created_at"
|
||||
:inbox-id="message.inboxId"
|
||||
:created-at="message.createdAt"
|
||||
:message-id="message.id"
|
||||
:is-private="message.private"
|
||||
:attachments="message.attachments"
|
||||
>
|
||||
<MessageContent
|
||||
:author="getName(message)"
|
||||
:message="message"
|
||||
:search-term="query"
|
||||
/>
|
||||
</SearchResultConversationItem>
|
||||
</SearchResultMessageItem>
|
||||
</li>
|
||||
</ul>
|
||||
</SearchResultSection>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
@@ -28,9 +30,12 @@ const titleCase = computed(() => props.title.toLowerCase());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="mx-0 my-2">
|
||||
<div v-if="showTitle" class="sticky top-0 p-2 z-50 mb-0.5 bg-n-background">
|
||||
<h3 class="text-sm text-n-slate-12">{{ title }}</h3>
|
||||
<section class="mx-0 mb-3">
|
||||
<div
|
||||
v-if="showTitle"
|
||||
class="sticky top-0 pt-2 py-3 z-50 bg-gradient-to-b from-n-background from-80% to-transparent mb-3 -mx-1.5 px-1.5"
|
||||
>
|
||||
<h3 class="text-sm text-n-slate-11">{{ title }}</h3>
|
||||
</div>
|
||||
<slot />
|
||||
<woot-loading-state
|
||||
@@ -39,9 +44,12 @@ const titleCase = computed(() => props.title.toLowerCase());
|
||||
/>
|
||||
<div
|
||||
v-if="empty && !isFetching"
|
||||
class="flex items-center justify-center px-4 py-6 m-2 rounded-xl bg-n-slate-2 dark:bg-n-solid-1"
|
||||
class="flex items-start justify-center px-4 py-6 rounded-xl bg-n-slate-2 dark:bg-n-solid-1"
|
||||
>
|
||||
<fluent-icon icon="info" size="16px" class="text-n-slate-11" />
|
||||
<Icon
|
||||
icon="i-lucide-info"
|
||||
class="text-n-slate-11 size-4 flex-shrink-0 mt-[3px]"
|
||||
/>
|
||||
<p class="mx-2 my-0 text-center text-n-slate-11">
|
||||
{{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
|
||||
</p>
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { computed, watch, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
tabs: {
|
||||
@@ -14,6 +17,8 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['tabChange']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const activeTab = ref(props.selectedTab);
|
||||
|
||||
watch(
|
||||
@@ -25,24 +30,35 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
const onTabChange = index => {
|
||||
const tabBarTabs = computed(() => {
|
||||
return props.tabs.map(tab => ({
|
||||
label: tab.name,
|
||||
count: tab.showBadge ? tab.count : null,
|
||||
}));
|
||||
});
|
||||
|
||||
const onTabChange = selectedTab => {
|
||||
const index = props.tabs.findIndex(tab => tab.name === selectedTab.label);
|
||||
activeTab.value = index;
|
||||
emit('tabChange', props.tabs[index].key);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mt-1 border-b border-n-weak">
|
||||
<woot-tabs :index="activeTab" :border="false" @change="onTabChange">
|
||||
<woot-tabs-item
|
||||
v-for="(item, index) in tabs"
|
||||
:key="item.key"
|
||||
:index="index"
|
||||
:name="item.name"
|
||||
:count="item.count"
|
||||
:show-badge="item.showBadge"
|
||||
is-compact
|
||||
/>
|
||||
</woot-tabs>
|
||||
<div class="flex items-center justify-between mt-7 mb-4">
|
||||
<TabBar
|
||||
:tabs="tabBarTabs"
|
||||
:initial-active-tab="activeTab"
|
||||
@tab-changed="onTabChange"
|
||||
/>
|
||||
|
||||
<Button
|
||||
:label="t('SEARCH.SORT_BY.RELEVANCE')"
|
||||
sm
|
||||
link
|
||||
slate
|
||||
class="hover:!no-underline pointer-events-none lg:inline-flex hidden"
|
||||
icon="i-lucide-arrow-up-down"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -4,6 +4,8 @@ import { useMapGetter, useStore } from 'dashboard/composables/store.js';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useTrack } from 'dashboard/composables';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useCamelCase } from 'dashboard/composables/useTransformKeys';
|
||||
import { generateURLParams, parseURLParams } from '../helpers/searchHelper';
|
||||
import {
|
||||
ROLES,
|
||||
CONVERSATION_PERMISSIONS,
|
||||
@@ -47,7 +49,7 @@ const articleRecords = useMapGetter('conversationSearch/getArticleRecords');
|
||||
const uiFlags = useMapGetter('conversationSearch/getUIFlags');
|
||||
|
||||
const addTypeToRecords = (records, type) =>
|
||||
records.value.map(item => ({ ...item, type }));
|
||||
records.value.map(item => ({ ...useCamelCase(item, { deep: true }), type }));
|
||||
|
||||
const mappedContacts = computed(() =>
|
||||
addTypeToRecords(contactRecords, 'contact')
|
||||
@@ -64,6 +66,11 @@ const mappedArticles = computed(() =>
|
||||
|
||||
const isSelectedTabAll = computed(() => selectedTab.value === 'all');
|
||||
|
||||
const searchResultSectionClass = computed(() => ({
|
||||
'mt-4': isSelectedTabAll.value,
|
||||
'mt-0.5': !isSelectedTabAll.value,
|
||||
}));
|
||||
|
||||
const sliceRecordsIfAllTab = items =>
|
||||
isSelectedTabAll.value ? items.value.slice(0, 5) : items.value;
|
||||
|
||||
@@ -227,30 +234,55 @@ const showViewMore = computed(() => ({
|
||||
articles: mappedArticles.value?.length > 5 && isSelectedTabAll.value,
|
||||
}));
|
||||
|
||||
const filters = ref({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: { type: null, from: null, to: null },
|
||||
});
|
||||
|
||||
const clearSearchResult = () => {
|
||||
pages.value = { contacts: 1, conversations: 1, messages: 1, articles: 1 };
|
||||
store.dispatch('conversationSearch/clearSearchResults');
|
||||
};
|
||||
|
||||
const buildSearchPayload = (basePayload = {}, searchType = 'message') => {
|
||||
const payload = { ...basePayload };
|
||||
|
||||
// Only include filters if advanced search is enabled
|
||||
if (isFeatureFlagEnabled(FEATURE_FLAGS.ADVANCED_SEARCH)) {
|
||||
// Date filters apply to all search types
|
||||
if (filters.value.dateRange.from) {
|
||||
payload.since = filters.value.dateRange.from;
|
||||
}
|
||||
if (filters.value.dateRange.to) {
|
||||
payload.until = filters.value.dateRange.to;
|
||||
}
|
||||
|
||||
// Only messages support 'from' and 'inboxId' filters
|
||||
if (searchType === 'message') {
|
||||
if (filters.value.from) payload.from = filters.value.from;
|
||||
if (filters.value.in) payload.inboxId = filters.value.in;
|
||||
}
|
||||
}
|
||||
|
||||
return payload;
|
||||
};
|
||||
|
||||
const updateURL = () => {
|
||||
// Update route with tab as URL parameter and query as query parameter
|
||||
const params = { accountId: route.params.accountId };
|
||||
const queryParams = {};
|
||||
const params = {
|
||||
accountId: route.params.accountId,
|
||||
...(selectedTab.value !== 'all' && { tab: selectedTab.value }),
|
||||
};
|
||||
|
||||
// Only add tab param if not 'all'
|
||||
if (selectedTab.value !== 'all') {
|
||||
params.tab = selectedTab.value;
|
||||
}
|
||||
const queryParams = {
|
||||
...(query.value?.trim() && { q: query.value.trim() }),
|
||||
...generateURLParams(
|
||||
filters.value,
|
||||
isFeatureFlagEnabled(FEATURE_FLAGS.ADVANCED_SEARCH)
|
||||
),
|
||||
};
|
||||
|
||||
if (query.value?.trim()) {
|
||||
queryParams.q = query.value.trim();
|
||||
}
|
||||
|
||||
router.replace({
|
||||
name: 'search',
|
||||
params,
|
||||
query: queryParams,
|
||||
});
|
||||
router.replace({ name: 'search', params, query: queryParams });
|
||||
};
|
||||
|
||||
const onSearch = q => {
|
||||
@@ -259,7 +291,13 @@ const onSearch = q => {
|
||||
updateURL();
|
||||
if (!q) return;
|
||||
useTrack(CONVERSATION_EVENTS.SEARCH_CONVERSATION);
|
||||
store.dispatch('conversationSearch/fullSearch', { q, page: 1 });
|
||||
|
||||
const searchPayload = buildSearchPayload({ q, page: 1 });
|
||||
store.dispatch('conversationSearch/fullSearch', searchPayload);
|
||||
};
|
||||
|
||||
const onFilterChange = () => {
|
||||
onSearch(query.value);
|
||||
};
|
||||
|
||||
const onBack = () => {
|
||||
@@ -280,12 +318,16 @@ const loadMore = () => {
|
||||
};
|
||||
|
||||
if (uiFlags.value.isFetching || selectedTab.value === 'all') return;
|
||||
|
||||
const tab = selectedTab.value;
|
||||
pages.value[tab] += 1;
|
||||
store.dispatch(SEARCH_ACTIONS[tab], {
|
||||
q: query.value,
|
||||
page: pages.value[tab],
|
||||
});
|
||||
|
||||
const payload = buildSearchPayload(
|
||||
{ q: query.value, page: pages.value[tab] },
|
||||
tab
|
||||
);
|
||||
|
||||
store.dispatch(SEARCH_ACTIONS[tab], payload);
|
||||
};
|
||||
|
||||
const onTabChange = tab => {
|
||||
@@ -295,6 +337,13 @@ const onTabChange = tab => {
|
||||
|
||||
onMounted(() => {
|
||||
store.dispatch('conversationSearch/clearSearchResults');
|
||||
store.dispatch('agents/get');
|
||||
|
||||
const parsedFilters = parseURLParams(
|
||||
route.query,
|
||||
isFeatureFlagEnabled(FEATURE_FLAGS.ADVANCED_SEARCH)
|
||||
);
|
||||
filters.value = parsedFilters;
|
||||
|
||||
// Auto-execute search if query parameter exists
|
||||
if (route.query.q) {
|
||||
@@ -321,9 +370,14 @@ onUnmounted(() => {
|
||||
/>
|
||||
</div>
|
||||
<section class="flex flex-col flex-grow w-full h-full overflow-hidden">
|
||||
<div class="w-full max-w-4xl mx-auto">
|
||||
<div class="w-full max-w-5xl mx-auto z-[60]">
|
||||
<div class="flex flex-col w-full px-4">
|
||||
<SearchHeader :initial-query="query" @search="onSearch" />
|
||||
<SearchHeader
|
||||
v-model:filters="filters"
|
||||
:initial-query="query"
|
||||
@search="onSearch"
|
||||
@filter-change="onFilterChange"
|
||||
/>
|
||||
<SearchTabs
|
||||
v-if="query"
|
||||
:tabs="tabs"
|
||||
@@ -333,7 +387,7 @@ onUnmounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow w-full h-full overflow-y-auto">
|
||||
<div class="w-full max-w-4xl mx-auto px-4 pb-6">
|
||||
<div class="w-full max-w-5xl mx-auto px-4 pb-6">
|
||||
<div v-if="showResultsSection">
|
||||
<Policy
|
||||
:permissions="[...ROLES, CONTACT_PERMISSIONS]"
|
||||
@@ -345,6 +399,7 @@ onUnmounted(() => {
|
||||
:contacts="contacts"
|
||||
:query="query"
|
||||
:show-title="isSelectedTabAll"
|
||||
class="mt-0.5"
|
||||
/>
|
||||
<NextButton
|
||||
v-if="showViewMore.contacts"
|
||||
@@ -367,6 +422,7 @@ onUnmounted(() => {
|
||||
:messages="messages"
|
||||
:query="query"
|
||||
:show-title="isSelectedTabAll"
|
||||
:class="searchResultSectionClass"
|
||||
/>
|
||||
<NextButton
|
||||
v-if="showViewMore.messages"
|
||||
@@ -389,6 +445,7 @@ onUnmounted(() => {
|
||||
:conversations="conversations"
|
||||
:query="query"
|
||||
:show-title="isSelectedTabAll"
|
||||
:class="searchResultSectionClass"
|
||||
/>
|
||||
<NextButton
|
||||
v-if="showViewMore.conversations"
|
||||
@@ -413,6 +470,7 @@ onUnmounted(() => {
|
||||
:articles="articles"
|
||||
:query="query"
|
||||
:show-title="isSelectedTabAll"
|
||||
:class="searchResultSectionClass"
|
||||
/>
|
||||
<NextButton
|
||||
v-if="showViewMore.articles"
|
||||
@@ -425,7 +483,7 @@ onUnmounted(() => {
|
||||
/>
|
||||
</Policy>
|
||||
|
||||
<div v-if="showLoadMore" class="flex justify-center mt-4 mb-6">
|
||||
<div v-if="showLoadMore" class="flex justify-center mt-3 mb-6">
|
||||
<NextButton
|
||||
v-if="!isSelectedTabAll"
|
||||
:label="t(`SEARCH.LOAD_MORE`)"
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
import { useExpandableContent } from 'shared/composables/useExpandableContent';
|
||||
|
||||
defineProps({
|
||||
text: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const { contentElement, showReadMore, showReadLess, toggleExpanded } =
|
||||
useExpandableContent({ useResizeObserverForCheck: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="py-2 text-xs font-medium">
|
||||
{{ $t('SEARCH.TRANSCRIPT') }}
|
||||
</span>
|
||||
<div
|
||||
class="text-n-slate-11 pt-1 text-sm rounded-lg w-full break-words grid items-center"
|
||||
:class="showReadMore ? 'grid-cols-[1fr_auto]' : 'grid-cols-1'"
|
||||
>
|
||||
<div
|
||||
ref="contentElement"
|
||||
class="min-w-0"
|
||||
:class="{ 'overflow-hidden line-clamp-1': showReadMore }"
|
||||
>
|
||||
{{ text }}
|
||||
<button
|
||||
v-if="showReadLess"
|
||||
class="text-sm text-n-slate-11 underline cursor-pointer bg-transparent border-0 p-0 hover:text-n-slate-12 font-medium ltr:ml-0.5 rtl:mr-0.5"
|
||||
@click.prevent.stop="toggleExpanded(false)"
|
||||
>
|
||||
{{ $t('SEARCH.READ_LESS') }}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="showReadMore"
|
||||
class="text-sm text-n-slate-11 underline cursor-pointer bg-transparent border-0 p-0 hover:text-n-slate-12 font-medium justify-self-end ltr:ml-0.5 rtl:mr-0.5"
|
||||
@click.prevent.stop="toggleExpanded(true)"
|
||||
>
|
||||
{{ $t('SEARCH.READ_MORE') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,75 @@
|
||||
import ContactAPI from 'dashboard/api/contacts';
|
||||
|
||||
export const DATE_RANGE_TYPES = {
|
||||
LAST_7_DAYS: 'last_7_days',
|
||||
LAST_30_DAYS: 'last_30_days',
|
||||
LAST_60_DAYS: 'last_60_days',
|
||||
LAST_90_DAYS: 'last_90_days',
|
||||
CUSTOM: 'custom',
|
||||
BETWEEN: 'between',
|
||||
};
|
||||
|
||||
export const generateURLParams = (
|
||||
{ from, in: inboxId, dateRange },
|
||||
isAdvancedSearchEnabled = true
|
||||
) => {
|
||||
const params = {};
|
||||
|
||||
// Only include filter params if advanced search is enabled
|
||||
if (isAdvancedSearchEnabled) {
|
||||
if (from) params.from = from;
|
||||
if (inboxId) params.inbox_id = inboxId;
|
||||
|
||||
if (dateRange?.type) {
|
||||
const { type, from: dateFrom, to: dateTo } = dateRange;
|
||||
params.range = type;
|
||||
|
||||
if (dateFrom) params.since = dateFrom;
|
||||
if (dateTo) params.until = dateTo;
|
||||
}
|
||||
}
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
export const parseURLParams = (query, isAdvancedSearchEnabled = true) => {
|
||||
// If advanced search is disabled, return empty filters
|
||||
if (!isAdvancedSearchEnabled) {
|
||||
return {
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: null,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const { from, inbox_id, since, until, range } = query;
|
||||
|
||||
let type = range;
|
||||
if (!type && (since || until)) {
|
||||
type = DATE_RANGE_TYPES.BETWEEN;
|
||||
}
|
||||
|
||||
return {
|
||||
from: from || null,
|
||||
in: inbox_id ? Number(inbox_id) : null,
|
||||
dateRange: {
|
||||
type,
|
||||
from: since ? Number(since) : null,
|
||||
to: until ? Number(until) : null,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const fetchContactDetails = async id => {
|
||||
try {
|
||||
const response = await ContactAPI.show(id);
|
||||
return response.data.payload;
|
||||
} catch (error) {
|
||||
// error
|
||||
return null;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,379 @@
|
||||
import ContactAPI from 'dashboard/api/contacts';
|
||||
import {
|
||||
DATE_RANGE_TYPES,
|
||||
generateURLParams,
|
||||
parseURLParams,
|
||||
fetchContactDetails,
|
||||
} from '../searchHelper';
|
||||
|
||||
// Mock ContactAPI
|
||||
vi.mock('dashboard/api/contacts', () => ({
|
||||
default: {
|
||||
show: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
describe('#generateURLParams', () => {
|
||||
it('returns empty object when no parameters provided', () => {
|
||||
expect(generateURLParams({})).toEqual({});
|
||||
});
|
||||
|
||||
it('generates params with from parameter', () => {
|
||||
const result = generateURLParams({ from: 'agent:123' });
|
||||
expect(result).toEqual({ from: 'agent:123' });
|
||||
});
|
||||
|
||||
it('generates params with inbox_id parameter', () => {
|
||||
const result = generateURLParams({ in: 456 });
|
||||
expect(result).toEqual({ inbox_id: 456 });
|
||||
});
|
||||
|
||||
it('generates params with all basic parameters', () => {
|
||||
const result = generateURLParams({
|
||||
from: 'contact:789',
|
||||
in: 123,
|
||||
});
|
||||
expect(result).toEqual({
|
||||
from: 'contact:789',
|
||||
inbox_id: 123,
|
||||
});
|
||||
});
|
||||
|
||||
describe('with date range', () => {
|
||||
it('generates params with date range type only', () => {
|
||||
const result = generateURLParams({
|
||||
dateRange: { type: DATE_RANGE_TYPES.LAST_7_DAYS },
|
||||
});
|
||||
expect(result).toEqual({
|
||||
range: 'last_7_days',
|
||||
});
|
||||
});
|
||||
|
||||
it('generates params with BETWEEN date range', () => {
|
||||
const result = generateURLParams({
|
||||
dateRange: {
|
||||
type: DATE_RANGE_TYPES.BETWEEN,
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
expect(result).toEqual({
|
||||
range: 'between',
|
||||
since: 1640995200,
|
||||
until: 1672531199,
|
||||
});
|
||||
});
|
||||
|
||||
it('generates params with CUSTOM date range', () => {
|
||||
const result = generateURLParams({
|
||||
dateRange: {
|
||||
type: DATE_RANGE_TYPES.CUSTOM,
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
expect(result).toEqual({
|
||||
range: 'custom',
|
||||
since: 1640995200,
|
||||
until: 1672531199,
|
||||
});
|
||||
});
|
||||
|
||||
it('handles date range with missing from/to values', () => {
|
||||
const result = generateURLParams({
|
||||
dateRange: {
|
||||
type: DATE_RANGE_TYPES.BETWEEN,
|
||||
from: null,
|
||||
to: undefined,
|
||||
},
|
||||
});
|
||||
expect(result).toEqual({
|
||||
range: 'between',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('generates params with all parameters combined', () => {
|
||||
const result = generateURLParams({
|
||||
from: 'agent:456',
|
||||
in: 789,
|
||||
dateRange: {
|
||||
type: DATE_RANGE_TYPES.BETWEEN,
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
expect(result).toEqual({
|
||||
from: 'agent:456',
|
||||
inbox_id: 789,
|
||||
range: 'between',
|
||||
since: 1640995200,
|
||||
until: 1672531199,
|
||||
});
|
||||
});
|
||||
|
||||
describe('when advanced search is disabled', () => {
|
||||
it('returns empty object when isAdvancedSearchEnabled is false', () => {
|
||||
const result = generateURLParams(
|
||||
{
|
||||
from: 'agent:123',
|
||||
in: 456,
|
||||
dateRange: {
|
||||
type: DATE_RANGE_TYPES.BETWEEN,
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
},
|
||||
false
|
||||
);
|
||||
expect(result).toEqual({});
|
||||
});
|
||||
|
||||
it('strips all filter params when feature flag is disabled', () => {
|
||||
const result = generateURLParams(
|
||||
{
|
||||
from: 'contact:789',
|
||||
in: 123,
|
||||
},
|
||||
false
|
||||
);
|
||||
expect(result).toEqual({});
|
||||
});
|
||||
|
||||
it('strips date range params when feature flag is disabled', () => {
|
||||
const result = generateURLParams(
|
||||
{
|
||||
dateRange: {
|
||||
type: DATE_RANGE_TYPES.LAST_7_DAYS,
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
},
|
||||
false
|
||||
);
|
||||
expect(result).toEqual({});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('#parseURLParams', () => {
|
||||
it('returns default values for empty query', () => {
|
||||
const result = parseURLParams({});
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: undefined,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('parses from parameter', () => {
|
||||
const result = parseURLParams({ from: 'agent:123' });
|
||||
expect(result).toEqual({
|
||||
from: 'agent:123',
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: undefined,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('parses inbox_id parameter as number', () => {
|
||||
const result = parseURLParams({ inbox_id: '456' });
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: 456,
|
||||
dateRange: {
|
||||
type: undefined,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('parses explicit range parameter', () => {
|
||||
const result = parseURLParams({
|
||||
range: 'last_7_days',
|
||||
since: '1640995200',
|
||||
until: '1672531199',
|
||||
});
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: 'last_7_days',
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
describe('inferred date range types', () => {
|
||||
it('infers BETWEEN type when both since and until are present', () => {
|
||||
const result = parseURLParams({
|
||||
since: '1640995200',
|
||||
until: '1672531199',
|
||||
});
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: 'between',
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('prioritizes explicit range over inferred type', () => {
|
||||
const result = parseURLParams({
|
||||
range: 'custom',
|
||||
since: '1640995200',
|
||||
until: '1672531199',
|
||||
});
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: 'custom',
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('parses all parameters combined', () => {
|
||||
const result = parseURLParams({
|
||||
from: 'contact:789',
|
||||
inbox_id: '123',
|
||||
range: 'between',
|
||||
since: '1640995200',
|
||||
until: '1672531199',
|
||||
});
|
||||
expect(result).toEqual({
|
||||
from: 'contact:789',
|
||||
in: 123,
|
||||
dateRange: {
|
||||
type: 'between',
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
describe('when advanced search is disabled', () => {
|
||||
it('returns empty filters when isAdvancedSearchEnabled is false', () => {
|
||||
const result = parseURLParams(
|
||||
{
|
||||
from: 'agent:123',
|
||||
inbox_id: '456',
|
||||
range: 'between',
|
||||
since: '1640995200',
|
||||
until: '1672531199',
|
||||
},
|
||||
false
|
||||
);
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: null,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('ignores all filter params from URL when feature flag is disabled', () => {
|
||||
const result = parseURLParams(
|
||||
{
|
||||
from: 'contact:789',
|
||||
inbox_id: '123',
|
||||
},
|
||||
false
|
||||
);
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: null,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('ignores date range params from URL when feature flag is disabled', () => {
|
||||
const result = parseURLParams(
|
||||
{
|
||||
range: 'last_7_days',
|
||||
since: '1640995200',
|
||||
until: '1672531199',
|
||||
},
|
||||
false
|
||||
);
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: null,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('#fetchContactDetails', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('returns contact data on successful API call', async () => {
|
||||
const mockContactData = {
|
||||
id: 123,
|
||||
name: 'John Doe',
|
||||
email: 'john@example.com',
|
||||
};
|
||||
|
||||
ContactAPI.show.mockResolvedValue({
|
||||
data: {
|
||||
payload: mockContactData,
|
||||
},
|
||||
});
|
||||
|
||||
const result = await fetchContactDetails(123);
|
||||
expect(result).toEqual(mockContactData);
|
||||
expect(ContactAPI.show).toHaveBeenCalledWith(123);
|
||||
});
|
||||
|
||||
it('returns null on API error', async () => {
|
||||
ContactAPI.show.mockRejectedValue(new Error('API Error'));
|
||||
|
||||
const result = await fetchContactDetails(123);
|
||||
expect(result).toBeNull();
|
||||
expect(ContactAPI.show).toHaveBeenCalledWith(123);
|
||||
});
|
||||
|
||||
it('handles different contact ID types', async () => {
|
||||
const mockContactData = { id: 456, name: 'Jane Doe' };
|
||||
ContactAPI.show.mockResolvedValue({
|
||||
data: { payload: mockContactData },
|
||||
});
|
||||
|
||||
// Test with string ID
|
||||
await fetchContactDetails('456');
|
||||
expect(ContactAPI.show).toHaveBeenCalledWith('456');
|
||||
|
||||
// Test with number ID
|
||||
await fetchContactDetails(456);
|
||||
expect(ContactAPI.show).toHaveBeenCalledWith(456);
|
||||
});
|
||||
});
|
||||
@@ -57,8 +57,9 @@ export const actions = {
|
||||
});
|
||||
}
|
||||
},
|
||||
async fullSearch({ commit, dispatch }, { q }) {
|
||||
if (!q) {
|
||||
async fullSearch({ commit, dispatch }, payload) {
|
||||
const { q, ...filters } = payload;
|
||||
if (!q && !Object.keys(filters).length) {
|
||||
return;
|
||||
}
|
||||
commit(types.FULL_SEARCH_SET_UI_FLAG, {
|
||||
@@ -67,10 +68,10 @@ export const actions = {
|
||||
});
|
||||
try {
|
||||
await Promise.all([
|
||||
dispatch('contactSearch', { q }),
|
||||
dispatch('conversationSearch', { q }),
|
||||
dispatch('messageSearch', { q }),
|
||||
dispatch('articleSearch', { q }),
|
||||
dispatch('contactSearch', { q, ...filters }),
|
||||
dispatch('conversationSearch', { q, ...filters }),
|
||||
dispatch('messageSearch', { q, ...filters }),
|
||||
dispatch('articleSearch', { q, ...filters }),
|
||||
]);
|
||||
} catch (error) {
|
||||
// Ignore error
|
||||
@@ -81,10 +82,11 @@ export const actions = {
|
||||
});
|
||||
}
|
||||
},
|
||||
async contactSearch({ commit }, { q, page = 1 }) {
|
||||
async contactSearch({ commit }, payload) {
|
||||
const { page = 1, ...searchParams } = payload;
|
||||
commit(types.CONTACT_SEARCH_SET_UI_FLAG, { isFetching: true });
|
||||
try {
|
||||
const { data } = await SearchAPI.contacts({ q, page });
|
||||
const { data } = await SearchAPI.contacts({ ...searchParams, page });
|
||||
commit(types.CONTACT_SEARCH_SET, data.payload.contacts);
|
||||
} catch (error) {
|
||||
// Ignore error
|
||||
@@ -92,10 +94,11 @@ export const actions = {
|
||||
commit(types.CONTACT_SEARCH_SET_UI_FLAG, { isFetching: false });
|
||||
}
|
||||
},
|
||||
async conversationSearch({ commit }, { q, page = 1 }) {
|
||||
async conversationSearch({ commit }, payload) {
|
||||
const { page = 1, ...searchParams } = payload;
|
||||
commit(types.CONVERSATION_SEARCH_SET_UI_FLAG, { isFetching: true });
|
||||
try {
|
||||
const { data } = await SearchAPI.conversations({ q, page });
|
||||
const { data } = await SearchAPI.conversations({ ...searchParams, page });
|
||||
commit(types.CONVERSATION_SEARCH_SET, data.payload.conversations);
|
||||
} catch (error) {
|
||||
// Ignore error
|
||||
@@ -103,10 +106,11 @@ export const actions = {
|
||||
commit(types.CONVERSATION_SEARCH_SET_UI_FLAG, { isFetching: false });
|
||||
}
|
||||
},
|
||||
async messageSearch({ commit }, { q, page = 1 }) {
|
||||
async messageSearch({ commit }, payload) {
|
||||
const { page = 1, ...searchParams } = payload;
|
||||
commit(types.MESSAGE_SEARCH_SET_UI_FLAG, { isFetching: true });
|
||||
try {
|
||||
const { data } = await SearchAPI.messages({ q, page });
|
||||
const { data } = await SearchAPI.messages({ ...searchParams, page });
|
||||
commit(types.MESSAGE_SEARCH_SET, data.payload.messages);
|
||||
} catch (error) {
|
||||
// Ignore error
|
||||
@@ -114,10 +118,11 @@ export const actions = {
|
||||
commit(types.MESSAGE_SEARCH_SET_UI_FLAG, { isFetching: false });
|
||||
}
|
||||
},
|
||||
async articleSearch({ commit }, { q, page = 1 }) {
|
||||
async articleSearch({ commit }, payload) {
|
||||
const { page = 1, ...searchParams } = payload;
|
||||
commit(types.ARTICLE_SEARCH_SET_UI_FLAG, { isFetching: true });
|
||||
try {
|
||||
const { data } = await SearchAPI.articles({ q, page });
|
||||
const { data } = await SearchAPI.articles({ ...searchParams, page });
|
||||
commit(types.ARTICLE_SEARCH_SET, data.payload.articles);
|
||||
} catch (error) {
|
||||
// Ignore error
|
||||
|
||||
@@ -77,6 +77,16 @@ describe('#actions', () => {
|
||||
expect(dispatch).toHaveBeenCalledWith('messageSearch', { q: 'test' });
|
||||
expect(dispatch).toHaveBeenCalledWith('articleSearch', { q: 'test' });
|
||||
});
|
||||
|
||||
it('should pass filters to all search actions including articleSearch', async () => {
|
||||
const payload = { q: 'test', since: 1700000000, until: 1732000000 };
|
||||
await actions.fullSearch({ commit, dispatch }, payload);
|
||||
|
||||
expect(dispatch).toHaveBeenCalledWith('contactSearch', payload);
|
||||
expect(dispatch).toHaveBeenCalledWith('conversationSearch', payload);
|
||||
expect(dispatch).toHaveBeenCalledWith('messageSearch', payload);
|
||||
expect(dispatch).toHaveBeenCalledWith('articleSearch', payload);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#contactSearch', () => {
|
||||
@@ -165,6 +175,22 @@ describe('#actions', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('should handle article search with date filters', async () => {
|
||||
axios.get.mockResolvedValue({
|
||||
data: { payload: { articles: [{ id: 1 }] } },
|
||||
});
|
||||
|
||||
await actions.articleSearch(
|
||||
{ commit },
|
||||
{ q: 'test', page: 1, since: 1700000000, until: 1732000000 }
|
||||
);
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.ARTICLE_SEARCH_SET_UI_FLAG, { isFetching: true }],
|
||||
[types.ARTICLE_SEARCH_SET, [{ id: 1 }]],
|
||||
[types.ARTICLE_SEARCH_SET_UI_FLAG, { isFetching: false }],
|
||||
]);
|
||||
});
|
||||
|
||||
it('should handle failed article search', async () => {
|
||||
axios.get.mockRejectedValue({});
|
||||
await actions.articleSearch({ commit }, { q: 'test' });
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
import { nextTick } from 'vue';
|
||||
import { useExpandableContent } from '../useExpandableContent';
|
||||
|
||||
// Mock VueUse composables
|
||||
vi.mock('@vueuse/core', () => ({
|
||||
useToggle: vi.fn(initialValue => {
|
||||
let value = initialValue;
|
||||
const toggle = newValue => {
|
||||
value = newValue !== undefined ? newValue : !value;
|
||||
};
|
||||
return [{ value }, toggle];
|
||||
}),
|
||||
useResizeObserver: vi.fn((element, callback) => {
|
||||
// Store callback for manual triggering in tests
|
||||
if (element.value) {
|
||||
callback();
|
||||
}
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('useExpandableContent', () => {
|
||||
let originalGetComputedStyle;
|
||||
|
||||
beforeEach(() => {
|
||||
// Mock window.getComputedStyle
|
||||
originalGetComputedStyle = window.getComputedStyle;
|
||||
window.getComputedStyle = vi.fn(() => ({
|
||||
lineHeight: '20px',
|
||||
}));
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
window.getComputedStyle = originalGetComputedStyle;
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('returns expected properties', () => {
|
||||
const result = useExpandableContent();
|
||||
|
||||
expect(result).toHaveProperty('contentElement');
|
||||
expect(result).toHaveProperty('isExpanded');
|
||||
expect(result).toHaveProperty('needsToggle');
|
||||
expect(result).toHaveProperty('toggleExpanded');
|
||||
expect(result).toHaveProperty('checkOverflow');
|
||||
});
|
||||
|
||||
it('initializes with default values', () => {
|
||||
const { isExpanded, needsToggle } = useExpandableContent();
|
||||
|
||||
expect(isExpanded.value).toBe(false);
|
||||
expect(needsToggle.value).toBe(false);
|
||||
});
|
||||
|
||||
it('checkOverflow sets needsToggle to true when content overflows', async () => {
|
||||
const { contentElement, needsToggle, checkOverflow } =
|
||||
useExpandableContent();
|
||||
|
||||
// Mock element with overflow
|
||||
contentElement.value = {
|
||||
scrollHeight: 100, // Much larger than 2 lines (40px)
|
||||
};
|
||||
|
||||
checkOverflow();
|
||||
await nextTick();
|
||||
|
||||
expect(needsToggle.value).toBe(true);
|
||||
});
|
||||
|
||||
it('checkOverflow sets needsToggle to false when content fits', async () => {
|
||||
const { contentElement, needsToggle, checkOverflow } =
|
||||
useExpandableContent();
|
||||
|
||||
// Mock element without overflow
|
||||
contentElement.value = {
|
||||
scrollHeight: 30, // Less than 2 lines (40px)
|
||||
};
|
||||
|
||||
checkOverflow();
|
||||
await nextTick();
|
||||
|
||||
expect(needsToggle.value).toBe(false);
|
||||
});
|
||||
|
||||
it('respects custom maxLines option', async () => {
|
||||
const { contentElement, needsToggle, checkOverflow } = useExpandableContent(
|
||||
{
|
||||
maxLines: 3,
|
||||
}
|
||||
);
|
||||
|
||||
// Mock element that fits in 3 lines but not 2
|
||||
contentElement.value = {
|
||||
scrollHeight: 50, // Fits in 3 lines (60px) but not 2 lines (40px)
|
||||
};
|
||||
|
||||
checkOverflow();
|
||||
await nextTick();
|
||||
|
||||
expect(needsToggle.value).toBe(false);
|
||||
});
|
||||
|
||||
it('uses defaultLineHeight when computed style is unavailable', async () => {
|
||||
window.getComputedStyle = vi.fn(() => ({
|
||||
lineHeight: 'normal', // Not a valid number
|
||||
}));
|
||||
|
||||
const { contentElement, needsToggle, checkOverflow } = useExpandableContent(
|
||||
{
|
||||
defaultLineHeight: 16,
|
||||
}
|
||||
);
|
||||
|
||||
// Mock element that overflows with 16px line height (32px max)
|
||||
contentElement.value = {
|
||||
scrollHeight: 40,
|
||||
};
|
||||
|
||||
checkOverflow();
|
||||
await nextTick();
|
||||
|
||||
expect(needsToggle.value).toBe(true);
|
||||
});
|
||||
|
||||
it('handles null contentElement gracefully', () => {
|
||||
const { checkOverflow } = useExpandableContent();
|
||||
|
||||
// Should not throw when contentElement is null
|
||||
expect(() => checkOverflow()).not.toThrow();
|
||||
});
|
||||
});
|
||||
62
app/javascript/shared/composables/useExpandableContent.js
Normal file
62
app/javascript/shared/composables/useExpandableContent.js
Normal file
@@ -0,0 +1,62 @@
|
||||
import { ref, computed, nextTick, onMounted } from 'vue';
|
||||
import { useToggle, useResizeObserver } from '@vueuse/core';
|
||||
|
||||
/**
|
||||
* Composable for handling expandable content with "Read more / Read less" functionality.
|
||||
* Detects content overflow and provides toggle state for expansion.
|
||||
*
|
||||
* @param {Object} options - Configuration options
|
||||
* @param {number} [options.maxLines=2] - Maximum number of lines before showing toggle
|
||||
* @param {number} [options.defaultLineHeight=20] - Fallback line height if computed style is unavailable
|
||||
* @param {boolean} [options.useResizeObserverForCheck=false] - Use ResizeObserver for continuous overflow checking
|
||||
* @returns {Object} - Composable state and methods
|
||||
*/
|
||||
export function useExpandableContent(options = {}) {
|
||||
const {
|
||||
maxLines = 2,
|
||||
defaultLineHeight = 20,
|
||||
useResizeObserverForCheck = false,
|
||||
} = options;
|
||||
|
||||
const contentElement = ref(null);
|
||||
const [isExpanded, toggleExpanded] = useToggle(false);
|
||||
const needsToggle = ref(false);
|
||||
|
||||
const showReadMore = computed(() => needsToggle.value && !isExpanded.value);
|
||||
const showReadLess = computed(() => needsToggle.value && isExpanded.value);
|
||||
|
||||
/**
|
||||
* Checks if content overflows the maximum allowed height
|
||||
* and updates needsToggle accordingly
|
||||
*/
|
||||
const checkOverflow = () => {
|
||||
if (!contentElement.value) return;
|
||||
|
||||
const element = contentElement.value;
|
||||
const computedStyle = window.getComputedStyle(element);
|
||||
const lineHeight =
|
||||
parseFloat(computedStyle.lineHeight) || defaultLineHeight;
|
||||
const maxHeight = lineHeight * maxLines;
|
||||
|
||||
needsToggle.value = element.scrollHeight > maxHeight;
|
||||
};
|
||||
|
||||
// Setup overflow checking based on configuration
|
||||
if (useResizeObserverForCheck) {
|
||||
useResizeObserver(contentElement, checkOverflow);
|
||||
} else {
|
||||
onMounted(() => {
|
||||
nextTick(checkOverflow);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
contentElement,
|
||||
isExpanded,
|
||||
needsToggle,
|
||||
showReadMore,
|
||||
showReadLess,
|
||||
toggleExpanded,
|
||||
checkOverflow,
|
||||
};
|
||||
}
|
||||
@@ -31,25 +31,38 @@ class SearchService
|
||||
end
|
||||
|
||||
def filter_conversations
|
||||
@conversations = current_account.conversations.where(inbox_id: accessable_inbox_ids)
|
||||
.joins('INNER JOIN contacts ON conversations.contact_id = contacts.id')
|
||||
.where("cast(conversations.display_id as text) ILIKE :search OR contacts.name ILIKE :search OR contacts.email
|
||||
conversations_query = current_account.conversations.where(inbox_id: accessable_inbox_ids)
|
||||
.joins('INNER JOIN contacts ON conversations.contact_id = contacts.id')
|
||||
.where("cast(conversations.display_id as text) ILIKE :search OR contacts.name ILIKE :search OR contacts.email
|
||||
ILIKE :search OR contacts.phone_number ILIKE :search OR contacts.identifier ILIKE :search", search: "%#{search_query}%")
|
||||
.order('conversations.created_at DESC')
|
||||
.page(params[:page])
|
||||
.per(15)
|
||||
|
||||
if current_account.feature_enabled?('advanced_search')
|
||||
conversations_query = apply_time_filter(conversations_query,
|
||||
'conversations.last_activity_at')
|
||||
end
|
||||
|
||||
@conversations = conversations_query.order('conversations.created_at DESC')
|
||||
.page(params[:page])
|
||||
.per(15)
|
||||
end
|
||||
|
||||
def filter_messages
|
||||
@messages = if use_gin_search
|
||||
filter_messages_with_gin
|
||||
elsif should_run_advanced_search?
|
||||
advanced_search
|
||||
advanced_search_with_fallback
|
||||
else
|
||||
filter_messages_with_like
|
||||
end
|
||||
end
|
||||
|
||||
def advanced_search_with_fallback
|
||||
advanced_search
|
||||
rescue Faraday::ConnectionFailed, Searchkick::Error, Elasticsearch::Transport::Transport::Error => e
|
||||
Rails.logger.warn("Elasticsearch unavailable, falling back to SQL search: #{e.message}")
|
||||
use_gin_search ? filter_messages_with_gin : filter_messages_with_like
|
||||
end
|
||||
|
||||
def should_run_advanced_search?
|
||||
ChatwootApp.advanced_search_allowed? && current_account.feature_enabled?('advanced_search')
|
||||
end
|
||||
@@ -58,6 +71,7 @@ class SearchService
|
||||
|
||||
def filter_messages_with_gin
|
||||
base_query = message_base_query
|
||||
base_query = apply_message_filters(base_query)
|
||||
|
||||
if search_query.present?
|
||||
# Use the @@ operator with to_tsquery for better GIN index utilization
|
||||
@@ -82,11 +96,12 @@ class SearchService
|
||||
end
|
||||
|
||||
def filter_messages_with_like
|
||||
message_base_query
|
||||
.where('messages.content ILIKE :search', search: "%#{search_query}%")
|
||||
.reorder('created_at DESC')
|
||||
.page(params[:page])
|
||||
.per(15)
|
||||
base_query = message_base_query
|
||||
base_query = apply_message_filters(base_query)
|
||||
base_query.where('messages.content ILIKE :search', search: "%#{search_query}%")
|
||||
.reorder('created_at DESC')
|
||||
.page(params[:page])
|
||||
.per(15)
|
||||
end
|
||||
|
||||
def message_base_query
|
||||
@@ -95,6 +110,45 @@ class SearchService
|
||||
query
|
||||
end
|
||||
|
||||
def apply_message_filters(query)
|
||||
return query unless current_account.feature_enabled?('advanced_search')
|
||||
|
||||
query = apply_time_filter(query, 'messages.created_at')
|
||||
query = apply_sender_filter(query)
|
||||
apply_inbox_id_filter(query)
|
||||
end
|
||||
|
||||
def apply_sender_filter(query)
|
||||
sender_type, sender_id = parse_from_param(params[:from])
|
||||
return query unless sender_type && sender_id
|
||||
|
||||
query.where(sender_type: sender_type, sender_id: sender_id)
|
||||
end
|
||||
|
||||
def parse_from_param(from_param)
|
||||
return [nil, nil] unless from_param&.match?(/\A(contact|agent):\d+\z/)
|
||||
|
||||
type, id = from_param.split(':')
|
||||
sender_type = type == 'agent' ? 'User' : 'Contact'
|
||||
[sender_type, id.to_i]
|
||||
end
|
||||
|
||||
def apply_inbox_id_filter(query)
|
||||
return query if params[:inbox_id].blank?
|
||||
|
||||
inbox_id = params[:inbox_id].to_i
|
||||
return query if inbox_id.zero?
|
||||
return query unless validate_inbox_access(inbox_id)
|
||||
|
||||
query.where(inbox_id: inbox_id)
|
||||
end
|
||||
|
||||
def validate_inbox_access(inbox_id)
|
||||
return true if should_skip_inbox_filtering?
|
||||
|
||||
accessable_inbox_ids.include?(inbox_id)
|
||||
end
|
||||
|
||||
def should_skip_inbox_filtering?
|
||||
account_user.administrator? || user_has_access_to_all_inboxes?
|
||||
end
|
||||
@@ -108,19 +162,46 @@ class SearchService
|
||||
end
|
||||
|
||||
def filter_contacts
|
||||
@contacts = current_account.contacts.where(
|
||||
contacts_query = current_account.contacts.where(
|
||||
"name ILIKE :search OR email ILIKE :search OR phone_number
|
||||
ILIKE :search OR identifier ILIKE :search", search: "%#{search_query}%"
|
||||
).resolved_contacts(
|
||||
)
|
||||
|
||||
contacts_query = apply_time_filter(contacts_query, 'last_activity_at') if current_account.feature_enabled?('advanced_search')
|
||||
|
||||
@contacts = contacts_query.resolved_contacts(
|
||||
use_crm_v2: current_account.feature_enabled?('crm_v2')
|
||||
).order_on_last_activity_at('desc').page(params[:page]).per(15)
|
||||
end
|
||||
|
||||
def filter_articles
|
||||
@articles = current_account.articles
|
||||
.text_search(search_query)
|
||||
.page(params[:page])
|
||||
.per(15)
|
||||
articles_query = current_account.articles.text_search(search_query)
|
||||
articles_query = apply_time_filter(articles_query, 'updated_at') if current_account.feature_enabled?('advanced_search')
|
||||
|
||||
@articles = articles_query.page(params[:page]).per(15)
|
||||
end
|
||||
|
||||
def apply_time_filter(query, column_name)
|
||||
return query if params[:since].blank? && params[:until].blank?
|
||||
|
||||
query = query.where("#{column_name} >= ?", cap_since_time(params[:since])) if params[:since].present?
|
||||
query = query.where("#{column_name} <= ?", cap_until_time(params[:until])) if params[:until].present?
|
||||
query
|
||||
end
|
||||
|
||||
def cap_since_time(since_param)
|
||||
max_lookback = 90.days.ago
|
||||
requested_time = Time.zone.at(since_param.to_i)
|
||||
|
||||
# Silently cap to max_lookback if requested time is too far back
|
||||
[requested_time, max_lookback].max
|
||||
end
|
||||
|
||||
def cap_until_time(until_param)
|
||||
max_future = 90.days.from_now
|
||||
requested_time = Time.zone.at(until_param.to_i)
|
||||
|
||||
[requested_time, max_future].min
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
@@ -6,3 +6,5 @@ json.slug article.slug
|
||||
json.portal_slug article.portal.slug
|
||||
json.account_id article.account_id
|
||||
json.category_name article.category&.name
|
||||
json.status article.status
|
||||
json.updated_at article.updated_at.to_i
|
||||
|
||||
@@ -3,3 +3,5 @@ json.id contact.id
|
||||
json.name contact.name
|
||||
json.phone_number contact.phone_number
|
||||
json.identifier contact.identifier
|
||||
json.additional_attributes contact.additional_attributes
|
||||
json.last_activity_at contact.last_activity_at&.to_i
|
||||
|
||||
@@ -84,6 +84,9 @@ en:
|
||||
invalid: must be a valid domain name
|
||||
search:
|
||||
query_missing: Specify search string with parameter q
|
||||
messages:
|
||||
search:
|
||||
time_range_limit_exceeded: 'Search is limited to the last %{days} days'
|
||||
categories:
|
||||
locale:
|
||||
unique: should be unique in the category and portal
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
module Enterprise::SearchService
|
||||
def advanced_search
|
||||
where_conditions = { account_id: current_account.id }
|
||||
where_conditions[:inbox_id] = accessable_inbox_ids unless should_skip_inbox_filtering?
|
||||
where_conditions = build_where_conditions
|
||||
apply_filters(where_conditions)
|
||||
|
||||
Message.search(
|
||||
search_query,
|
||||
@@ -12,4 +12,77 @@ module Enterprise::SearchService
|
||||
per_page: 15
|
||||
)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def build_where_conditions
|
||||
conditions = { account_id: current_account.id }
|
||||
conditions[:inbox_id] = accessable_inbox_ids unless should_skip_inbox_filtering?
|
||||
conditions
|
||||
end
|
||||
|
||||
def apply_filters(where_conditions)
|
||||
apply_from_filter(where_conditions)
|
||||
apply_time_range_filter(where_conditions)
|
||||
apply_inbox_filter(where_conditions)
|
||||
end
|
||||
|
||||
def apply_from_filter(where_conditions)
|
||||
sender_type, sender_id = parse_from_param(params[:from])
|
||||
return unless sender_type && sender_id
|
||||
|
||||
where_conditions[:sender_type] = sender_type
|
||||
where_conditions[:sender_id] = sender_id
|
||||
end
|
||||
|
||||
def parse_from_param(from_param)
|
||||
return [nil, nil] unless from_param&.match?(/\A(contact|agent):\d+\z/)
|
||||
|
||||
type, id = from_param.split(':')
|
||||
sender_type = type == 'agent' ? 'User' : 'Contact'
|
||||
[sender_type, id.to_i]
|
||||
end
|
||||
|
||||
def apply_time_range_filter(where_conditions)
|
||||
time_conditions = {}
|
||||
time_conditions[:gte] = enforce_time_limit(params[:since])
|
||||
time_conditions[:lte] = cap_until_time(params[:until]) if params[:until].present?
|
||||
|
||||
where_conditions[:created_at] = time_conditions if time_conditions.any?
|
||||
end
|
||||
|
||||
def cap_until_time(until_param)
|
||||
max_future = 90.days.from_now
|
||||
requested_time = Time.zone.at(until_param.to_i)
|
||||
|
||||
[requested_time, max_future].min
|
||||
end
|
||||
|
||||
def enforce_time_limit(since_param)
|
||||
max_lookback = Limits::MESSAGE_SEARCH_TIME_RANGE_LIMIT_DAYS.days.ago
|
||||
|
||||
if since_param.present?
|
||||
requested_time = Time.zone.at(since_param.to_i)
|
||||
# Silently cap to max_lookback if requested time is too far back
|
||||
[requested_time, max_lookback].max
|
||||
else
|
||||
max_lookback
|
||||
end
|
||||
end
|
||||
|
||||
def apply_inbox_filter(where_conditions)
|
||||
return if params[:inbox_id].blank?
|
||||
|
||||
inbox_id = params[:inbox_id].to_i
|
||||
return if inbox_id.zero?
|
||||
return unless validate_inbox_access(inbox_id)
|
||||
|
||||
where_conditions[:inbox_id] = inbox_id
|
||||
end
|
||||
|
||||
def validate_inbox_access(inbox_id)
|
||||
return true if should_skip_inbox_filtering?
|
||||
|
||||
accessable_inbox_ids.include?(inbox_id)
|
||||
end
|
||||
end
|
||||
|
||||
@@ -9,6 +9,7 @@ module Limits
|
||||
COMPANY_NAME_LENGTH_LIMIT = 100
|
||||
COMPANY_DESCRIPTION_LENGTH_LIMIT = 1000
|
||||
MAX_CUSTOM_FILTERS_PER_USER = 1000
|
||||
MESSAGE_SEARCH_TIME_RANGE_LIMIT_DAYS = 90
|
||||
|
||||
def self.conversation_message_per_minute_limit
|
||||
ENV.fetch('CONVERSATION_MESSAGE_PER_MINUTE_LIMIT', '200').to_i
|
||||
|
||||
183
lib/tasks/search_test_data.rake
Normal file
183
lib/tasks/search_test_data.rake
Normal file
@@ -0,0 +1,183 @@
|
||||
# rubocop:disable Metrics/BlockLength
|
||||
namespace :search do
|
||||
desc 'Create test messages for advanced search manual testing across multiple inboxes'
|
||||
task setup_test_data: :environment do
|
||||
puts '🔍 Setting up test data for advanced search...'
|
||||
|
||||
account = Account.first
|
||||
unless account
|
||||
puts '❌ No account found. Please create an account first.'
|
||||
exit 1
|
||||
end
|
||||
|
||||
agents = account.users.to_a
|
||||
unless agents.any?
|
||||
puts '❌ No agents found. Please create users first.'
|
||||
exit 1
|
||||
end
|
||||
|
||||
puts "✅ Using account: #{account.name} (ID: #{account.id})"
|
||||
puts "✅ Found #{agents.count} agent(s)"
|
||||
|
||||
# Create missing inbox types for comprehensive testing
|
||||
puts "\n📥 Checking and creating inboxes..."
|
||||
|
||||
# API inbox
|
||||
unless account.inboxes.exists?(channel_type: 'Channel::Api')
|
||||
puts ' Creating API inbox...'
|
||||
account.inboxes.create!(
|
||||
name: 'Search Test API',
|
||||
channel: Channel::Api.create!(account: account)
|
||||
)
|
||||
end
|
||||
|
||||
# Web Widget inbox
|
||||
unless account.inboxes.exists?(channel_type: 'Channel::WebWidget')
|
||||
puts ' Creating WebWidget inbox...'
|
||||
account.inboxes.create!(
|
||||
name: 'Search Test WebWidget',
|
||||
channel: Channel::WebWidget.create!(account: account, website_url: 'https://example.com')
|
||||
)
|
||||
end
|
||||
|
||||
# Email inbox
|
||||
unless account.inboxes.exists?(channel_type: 'Channel::Email')
|
||||
puts ' Creating Email inbox...'
|
||||
account.inboxes.create!(
|
||||
name: 'Search Test Email',
|
||||
channel: Channel::Email.create!(
|
||||
account: account,
|
||||
email: 'search-test@example.com',
|
||||
imap_enabled: false,
|
||||
smtp_enabled: false
|
||||
)
|
||||
)
|
||||
end
|
||||
|
||||
inboxes = account.inboxes.to_a
|
||||
puts "✅ Using #{inboxes.count} inbox(es):"
|
||||
inboxes.each { |i| puts " - #{i.name} (ID: #{i.id}, Type: #{i.channel_type})" }
|
||||
|
||||
# Create 10 test contacts
|
||||
contacts = []
|
||||
10.times do |i|
|
||||
contacts << account.contacts.find_or_create_by!(
|
||||
email: "test-customer-#{i}@example.com"
|
||||
) do |c|
|
||||
c.name = Faker::Name.name
|
||||
end
|
||||
end
|
||||
puts "✅ Created/found #{contacts.count} test contacts"
|
||||
|
||||
target_messages = 50_000
|
||||
messages_per_conversation = 100
|
||||
total_conversations = target_messages / messages_per_conversation
|
||||
|
||||
puts "\n📝 Creating #{target_messages} messages across #{total_conversations} conversations..."
|
||||
puts " Distribution: #{inboxes.count} inboxes × #{total_conversations / inboxes.count} conversations each"
|
||||
|
||||
start_time = 2.years.ago
|
||||
end_time = Time.current
|
||||
time_range = end_time - start_time
|
||||
|
||||
created_count = 0
|
||||
failed_count = 0
|
||||
conversations_per_inbox = total_conversations / inboxes.count
|
||||
conversation_statuses = [:open, :resolved]
|
||||
|
||||
inboxes.each do |inbox|
|
||||
conversations_per_inbox.times do
|
||||
# Pick random contact and agent for this conversation
|
||||
contact = contacts.sample
|
||||
agent = agents.sample
|
||||
|
||||
# Create or find ContactInbox
|
||||
contact_inbox = ContactInbox.find_or_create_by!(
|
||||
contact: contact,
|
||||
inbox: inbox
|
||||
) do |ci|
|
||||
ci.source_id = "test_#{SecureRandom.hex(8)}"
|
||||
end
|
||||
|
||||
# Create conversation
|
||||
conversation = inbox.conversations.create!(
|
||||
account: account,
|
||||
contact: contact,
|
||||
inbox: inbox,
|
||||
contact_inbox: contact_inbox,
|
||||
status: conversation_statuses.sample
|
||||
)
|
||||
|
||||
# Create messages for this conversation (50 incoming, 50 outgoing)
|
||||
50.times do
|
||||
random_time = start_time + (rand * time_range)
|
||||
|
||||
# Incoming message from contact
|
||||
begin
|
||||
Message.create!(
|
||||
content: Faker::Movie.quote,
|
||||
account: account,
|
||||
inbox: inbox,
|
||||
conversation: conversation,
|
||||
message_type: :incoming,
|
||||
sender: contact,
|
||||
created_at: random_time,
|
||||
updated_at: random_time
|
||||
)
|
||||
created_count += 1
|
||||
rescue StandardError => e
|
||||
failed_count += 1
|
||||
puts "❌ Failed to create message: #{e.message}" if failed_count <= 5
|
||||
end
|
||||
|
||||
# Outgoing message from agent
|
||||
begin
|
||||
Message.create!(
|
||||
content: Faker::Movie.quote,
|
||||
account: account,
|
||||
inbox: inbox,
|
||||
conversation: conversation,
|
||||
message_type: :outgoing,
|
||||
sender: agent,
|
||||
created_at: random_time + rand(60..600),
|
||||
updated_at: random_time + rand(60..600)
|
||||
)
|
||||
created_count += 1
|
||||
rescue StandardError => e
|
||||
failed_count += 1
|
||||
puts "❌ Failed to create message: #{e.message}" if failed_count <= 5
|
||||
end
|
||||
|
||||
print "\r🔄 Progress: #{created_count}/#{target_messages} messages created..." if (created_count % 500).zero?
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
puts "\n\n✅ Successfully created #{created_count} messages!"
|
||||
puts "❌ Failed: #{failed_count}" if failed_count.positive?
|
||||
|
||||
puts "\n📊 Summary:"
|
||||
puts " - Total messages: #{Message.where(account: account).count}"
|
||||
puts " - Total conversations: #{Conversation.where(account: account).count}"
|
||||
|
||||
min_date = Message.where(account: account).minimum(:created_at)&.strftime('%Y-%m-%d')
|
||||
max_date = Message.where(account: account).maximum(:created_at)&.strftime('%Y-%m-%d')
|
||||
puts " - Date range: #{min_date} to #{max_date}"
|
||||
puts "\nBreakdown by inbox:"
|
||||
inboxes.each do |inbox|
|
||||
msg_count = Message.where(inbox: inbox).count
|
||||
conv_count = Conversation.where(inbox: inbox).count
|
||||
puts " - #{inbox.name} (#{inbox.channel_type}): #{msg_count} messages, #{conv_count} conversations"
|
||||
end
|
||||
puts "\nBreakdown by sender type:"
|
||||
puts " - Incoming (from contacts): #{Message.where(account: account, message_type: :incoming).count}"
|
||||
puts " - Outgoing (from agents): #{Message.where(account: account, message_type: :outgoing).count}"
|
||||
|
||||
puts "\n🔧 Next steps:"
|
||||
puts ' 1. Ensure OpenSearch is running: mise elasticsearch-start'
|
||||
puts ' 2. Reindex messages: rails runner "Message.search_index.import Message.all"'
|
||||
puts " 3. Enable feature: rails runner \"Account.find(#{account.id}).enable_features('advanced_search')\""
|
||||
puts "\n💡 Then test the search with filters via API or Rails console!"
|
||||
end
|
||||
end
|
||||
# rubocop:enable Metrics/BlockLength
|
||||
@@ -69,6 +69,80 @@ RSpec.describe 'Search', type: :request do
|
||||
expect(response_data[:payload].keys).to contain_exactly(:contacts)
|
||||
expect(response_data[:payload][:contacts].length).to eq 1
|
||||
end
|
||||
|
||||
it 'returns last_activity_at in contact search results' do
|
||||
contact = create(:contact, email: 'activity@test.com', account: account, last_activity_at: 3.days.ago)
|
||||
|
||||
get "/api/v1/accounts/#{account.id}/search/contacts",
|
||||
headers: agent.create_new_auth_token,
|
||||
params: { q: 'activity' },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:success)
|
||||
response_data = JSON.parse(response.body, symbolize_names: true)
|
||||
|
||||
contact_result = response_data[:payload][:contacts].first
|
||||
expect(contact_result[:last_activity_at]).to eq(contact.last_activity_at.to_i)
|
||||
expect(contact_result).not_to have_key(:created_at)
|
||||
end
|
||||
|
||||
context 'with advanced_search feature enabled', :opensearch do
|
||||
before do
|
||||
account.enable_features!('advanced_search')
|
||||
end
|
||||
|
||||
it 'filters contacts by since parameter' do
|
||||
create(:contact, email: 'old@test.com', account: account, last_activity_at: 10.days.ago)
|
||||
create(:contact, email: 'recent@test.com', account: account, last_activity_at: 2.days.ago)
|
||||
|
||||
get "/api/v1/accounts/#{account.id}/search/contacts",
|
||||
headers: agent.create_new_auth_token,
|
||||
params: { q: 'test', since: 5.days.ago.to_i },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:success)
|
||||
response_data = JSON.parse(response.body, symbolize_names: true)
|
||||
|
||||
contact_emails = response_data[:payload][:contacts].pluck(:email)
|
||||
expect(contact_emails).to include('recent@test.com')
|
||||
expect(contact_emails).not_to include('old@test.com')
|
||||
end
|
||||
|
||||
it 'filters contacts by until parameter' do
|
||||
create(:contact, email: 'old@test.com', account: account, last_activity_at: 10.days.ago)
|
||||
create(:contact, email: 'recent@test.com', account: account, last_activity_at: 2.days.ago)
|
||||
|
||||
get "/api/v1/accounts/#{account.id}/search/contacts",
|
||||
headers: agent.create_new_auth_token,
|
||||
params: { q: 'test', until: 5.days.ago.to_i },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:success)
|
||||
response_data = JSON.parse(response.body, symbolize_names: true)
|
||||
|
||||
contact_emails = response_data[:payload][:contacts].pluck(:email)
|
||||
expect(contact_emails).to include('old@test.com')
|
||||
expect(contact_emails).not_to include('recent@test.com')
|
||||
end
|
||||
|
||||
it 'filters contacts by both since and until parameters' do
|
||||
create(:contact, email: 'veryold@test.com', account: account, last_activity_at: 20.days.ago)
|
||||
create(:contact, email: 'old@test.com', account: account, last_activity_at: 10.days.ago)
|
||||
create(:contact, email: 'recent@test.com', account: account, last_activity_at: 2.days.ago)
|
||||
|
||||
get "/api/v1/accounts/#{account.id}/search/contacts",
|
||||
headers: agent.create_new_auth_token,
|
||||
params: { q: 'test', since: 15.days.ago.to_i, until: 5.days.ago.to_i },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:success)
|
||||
response_data = JSON.parse(response.body, symbolize_names: true)
|
||||
|
||||
contact_emails = response_data[:payload][:contacts].pluck(:email)
|
||||
expect(contact_emails).to include('old@test.com')
|
||||
expect(contact_emails).not_to include('veryold@test.com', 'recent@test.com')
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -94,6 +168,104 @@ RSpec.describe 'Search', type: :request do
|
||||
expect(response_data[:payload].keys).to contain_exactly(:conversations)
|
||||
expect(response_data[:payload][:conversations].length).to eq 1
|
||||
end
|
||||
|
||||
context 'with advanced_search feature enabled', :opensearch do
|
||||
before do
|
||||
account.enable_features!('advanced_search')
|
||||
end
|
||||
|
||||
it 'filters conversations by since parameter' do
|
||||
unique_id = SecureRandom.hex(8)
|
||||
old_contact = create(:contact, email: "old-#{unique_id}@test.com", account: account)
|
||||
recent_contact = create(:contact, email: "recent-#{unique_id}@test.com", account: account)
|
||||
old_conversation = create(:conversation, account: account, contact: old_contact)
|
||||
recent_conversation = create(:conversation, account: account, contact: recent_contact)
|
||||
create(:message, conversation: old_conversation, account: account, content: 'message 1')
|
||||
create(:message, conversation: recent_conversation, account: account, content: 'message 2')
|
||||
create(:inbox_member, user: agent, inbox: old_conversation.inbox)
|
||||
create(:inbox_member, user: agent, inbox: recent_conversation.inbox)
|
||||
|
||||
# Bypass CURRENT_TIMESTAMP default
|
||||
# rubocop:disable Rails/SkipsModelValidations
|
||||
Conversation.where(id: old_conversation.id).update_all(last_activity_at: 10.days.ago)
|
||||
Conversation.where(id: recent_conversation.id).update_all(last_activity_at: 2.days.ago)
|
||||
# rubocop:enable Rails/SkipsModelValidations
|
||||
|
||||
get "/api/v1/accounts/#{account.id}/search/conversations",
|
||||
headers: agent.create_new_auth_token,
|
||||
params: { q: unique_id, since: 5.days.ago.to_i },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:success)
|
||||
response_data = JSON.parse(response.body, symbolize_names: true)
|
||||
|
||||
conversation_display_ids = response_data[:payload][:conversations].pluck(:id)
|
||||
expect(conversation_display_ids).to eq([recent_conversation.display_id])
|
||||
end
|
||||
|
||||
it 'filters conversations by until parameter' do
|
||||
unique_id = SecureRandom.hex(8)
|
||||
old_contact = create(:contact, email: "old-#{unique_id}@test.com", account: account)
|
||||
recent_contact = create(:contact, email: "recent-#{unique_id}@test.com", account: account)
|
||||
old_conversation = create(:conversation, account: account, contact: old_contact)
|
||||
recent_conversation = create(:conversation, account: account, contact: recent_contact)
|
||||
create(:message, conversation: old_conversation, account: account, content: 'message 1')
|
||||
create(:message, conversation: recent_conversation, account: account, content: 'message 2')
|
||||
create(:inbox_member, user: agent, inbox: old_conversation.inbox)
|
||||
create(:inbox_member, user: agent, inbox: recent_conversation.inbox)
|
||||
|
||||
# Bypass CURRENT_TIMESTAMP default
|
||||
# rubocop:disable Rails/SkipsModelValidations
|
||||
Conversation.where(id: old_conversation.id).update_all(last_activity_at: 10.days.ago)
|
||||
Conversation.where(id: recent_conversation.id).update_all(last_activity_at: 2.days.ago)
|
||||
# rubocop:enable Rails/SkipsModelValidations
|
||||
|
||||
get "/api/v1/accounts/#{account.id}/search/conversations",
|
||||
headers: agent.create_new_auth_token,
|
||||
params: { q: unique_id, until: 5.days.ago.to_i },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:success)
|
||||
response_data = JSON.parse(response.body, symbolize_names: true)
|
||||
|
||||
conversation_display_ids = response_data[:payload][:conversations].pluck(:id)
|
||||
expect(conversation_display_ids).to eq([old_conversation.display_id])
|
||||
end
|
||||
|
||||
it 'filters conversations by both since and until parameters' do
|
||||
unique_id = SecureRandom.hex(8)
|
||||
very_old_contact = create(:contact, email: "veryold-#{unique_id}@test.com", account: account)
|
||||
old_contact = create(:contact, email: "old-#{unique_id}@test.com", account: account)
|
||||
recent_contact = create(:contact, email: "recent-#{unique_id}@test.com", account: account)
|
||||
very_old_conversation = create(:conversation, account: account, contact: very_old_contact)
|
||||
old_conversation = create(:conversation, account: account, contact: old_contact)
|
||||
recent_conversation = create(:conversation, account: account, contact: recent_contact)
|
||||
create(:message, conversation: very_old_conversation, account: account, content: 'message 1')
|
||||
create(:message, conversation: old_conversation, account: account, content: 'message 2')
|
||||
create(:message, conversation: recent_conversation, account: account, content: 'message 3')
|
||||
create(:inbox_member, user: agent, inbox: very_old_conversation.inbox)
|
||||
create(:inbox_member, user: agent, inbox: old_conversation.inbox)
|
||||
create(:inbox_member, user: agent, inbox: recent_conversation.inbox)
|
||||
|
||||
# Bypass CURRENT_TIMESTAMP default
|
||||
# rubocop:disable Rails/SkipsModelValidations
|
||||
Conversation.where(id: very_old_conversation.id).update_all(last_activity_at: 20.days.ago)
|
||||
Conversation.where(id: old_conversation.id).update_all(last_activity_at: 10.days.ago)
|
||||
Conversation.where(id: recent_conversation.id).update_all(last_activity_at: 2.days.ago)
|
||||
# rubocop:enable Rails/SkipsModelValidations
|
||||
|
||||
get "/api/v1/accounts/#{account.id}/search/conversations",
|
||||
headers: agent.create_new_auth_token,
|
||||
params: { q: unique_id, since: 15.days.ago.to_i, until: 5.days.ago.to_i },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:success)
|
||||
response_data = JSON.parse(response.body, symbolize_names: true)
|
||||
|
||||
conversation_display_ids = response_data[:payload][:conversations].pluck(:id)
|
||||
expect(conversation_display_ids).to eq([old_conversation.display_id])
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -175,6 +347,74 @@ RSpec.describe 'Search', type: :request do
|
||||
|
||||
expect(response_data[:payload][:articles].length).to eq 15 # Default per_page is 15
|
||||
end
|
||||
|
||||
context 'with advanced_search feature enabled', :opensearch do
|
||||
before do
|
||||
account.enable_features!('advanced_search')
|
||||
end
|
||||
|
||||
it 'filters articles by since parameter' do
|
||||
portal = create(:portal, account: account)
|
||||
old_article = create(:article, title: 'Old Article test', account: account, portal: portal,
|
||||
author: agent, status: 'published', updated_at: 10.days.ago)
|
||||
recent_article = create(:article, title: 'Recent Article test', account: account, portal: portal,
|
||||
author: agent, status: 'published', updated_at: 2.days.ago)
|
||||
|
||||
get "/api/v1/accounts/#{account.id}/search/articles",
|
||||
headers: agent.create_new_auth_token,
|
||||
params: { q: 'test', since: 5.days.ago.to_i },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:success)
|
||||
response_data = JSON.parse(response.body, symbolize_names: true)
|
||||
|
||||
article_ids = response_data[:payload][:articles].pluck(:id)
|
||||
expect(article_ids).to include(recent_article.id)
|
||||
expect(article_ids).not_to include(old_article.id)
|
||||
end
|
||||
|
||||
it 'filters articles by until parameter' do
|
||||
portal = create(:portal, account: account)
|
||||
old_article = create(:article, title: 'Old Article test', account: account, portal: portal,
|
||||
author: agent, status: 'published', updated_at: 10.days.ago)
|
||||
recent_article = create(:article, title: 'Recent Article test', account: account, portal: portal,
|
||||
author: agent, status: 'published', updated_at: 2.days.ago)
|
||||
|
||||
get "/api/v1/accounts/#{account.id}/search/articles",
|
||||
headers: agent.create_new_auth_token,
|
||||
params: { q: 'test', until: 5.days.ago.to_i },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:success)
|
||||
response_data = JSON.parse(response.body, symbolize_names: true)
|
||||
|
||||
article_ids = response_data[:payload][:articles].pluck(:id)
|
||||
expect(article_ids).to include(old_article.id)
|
||||
expect(article_ids).not_to include(recent_article.id)
|
||||
end
|
||||
|
||||
it 'filters articles by both since and until parameters' do
|
||||
portal = create(:portal, account: account)
|
||||
very_old_article = create(:article, title: 'Very Old Article test', account: account, portal: portal,
|
||||
author: agent, status: 'published', updated_at: 20.days.ago)
|
||||
old_article = create(:article, title: 'Old Article test', account: account, portal: portal,
|
||||
author: agent, status: 'published', updated_at: 10.days.ago)
|
||||
recent_article = create(:article, title: 'Recent Article test', account: account, portal: portal,
|
||||
author: agent, status: 'published', updated_at: 2.days.ago)
|
||||
|
||||
get "/api/v1/accounts/#{account.id}/search/articles",
|
||||
headers: agent.create_new_auth_token,
|
||||
params: { q: 'test', since: 15.days.ago.to_i, until: 5.days.ago.to_i },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:success)
|
||||
response_data = JSON.parse(response.body, symbolize_names: true)
|
||||
|
||||
article_ids = response_data[:payload][:articles].pluck(:id)
|
||||
expect(article_ids).to include(old_article.id)
|
||||
expect(article_ids).not_to include(very_old_article.id, recent_article.id)
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -18,7 +18,9 @@ describe Webhooks::Trigger do
|
||||
|
||||
before do
|
||||
ActiveJob::Base.queue_adapter = :test
|
||||
allow(GlobalConfig).to receive(:get_value).and_call_original
|
||||
allow(GlobalConfig).to receive(:get_value).with('WEBHOOK_TIMEOUT').and_return(webhook_timeout)
|
||||
allow(GlobalConfig).to receive(:get_value).with('DEPLOYMENT_ENV').and_return(nil)
|
||||
end
|
||||
|
||||
after do
|
||||
|
||||
@@ -95,6 +95,7 @@ describe SearchService do
|
||||
let(:search_type) { 'Message' }
|
||||
|
||||
it 'uses LIKE search when search_with_gin feature is disabled' do
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(false)
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
@@ -105,6 +106,7 @@ describe SearchService do
|
||||
end
|
||||
|
||||
it 'uses GIN search when search_with_gin feature is enabled' do
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(true)
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
@@ -119,11 +121,13 @@ describe SearchService do
|
||||
message3 = create(:message, account: account, inbox: inbox, content: 'Harry is a wizard apprentice')
|
||||
|
||||
# Test with GIN search
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(true)
|
||||
gin_search = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
gin_results = gin_search.perform[:messages].map(&:id)
|
||||
|
||||
# Test with LIKE search
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(false)
|
||||
like_search = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
like_results = like_search.perform[:messages].map(&:id)
|
||||
@@ -133,6 +137,108 @@ describe SearchService do
|
||||
expect(gin_results).to include(message.id, message2.id, message3.id)
|
||||
end
|
||||
end
|
||||
|
||||
# rubocop:disable RSpec/MultipleMemoizedHelpers
|
||||
context 'when filtering messages with time, sender, and inbox', :opensearch do
|
||||
let!(:agent) { create(:user, account: account) }
|
||||
let!(:inbox2) { create(:inbox, account: account) }
|
||||
let!(:old_message) do
|
||||
create(:message, account: account, inbox: inbox, content: 'old wizard message', sender: harry, created_at: 80.days.ago)
|
||||
end
|
||||
let!(:recent_message) do
|
||||
create(:message, account: account, inbox: inbox, content: 'recent wizard message', sender: harry, created_at: 1.day.ago)
|
||||
end
|
||||
let!(:agent_message) do
|
||||
create(:message, account: account, inbox: inbox, content: 'wizard from agent', sender: agent, created_at: 1.day.ago)
|
||||
end
|
||||
let!(:inbox2_message) do
|
||||
create(:message, account: account, inbox: inbox2, content: 'wizard in inbox2', sender: harry, created_at: 1.day.ago)
|
||||
end
|
||||
|
||||
before do
|
||||
account.enable_features!('advanced_search')
|
||||
create(:inbox_member, inbox: inbox2, user: user)
|
||||
end
|
||||
|
||||
it 'filters messages by time range with LIKE search' do
|
||||
allow(ChatwootApp).to receive(:advanced_search_allowed?).and_return(false)
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(false)
|
||||
allow(account).to receive(:feature_enabled?).with('advanced_search').and_return(true)
|
||||
params = { q: 'wizard', since: 50.days.ago.to_i, search_type: 'Message' }
|
||||
search = described_class.new(current_user: user, current_account: account, params: params, search_type: 'Message')
|
||||
results = search.perform[:messages]
|
||||
|
||||
expect(results.map(&:id)).to include(recent_message.id, agent_message.id, inbox2_message.id)
|
||||
expect(results.map(&:id)).not_to include(old_message.id)
|
||||
end
|
||||
|
||||
it 'filters messages by time range with GIN search' do
|
||||
allow(ChatwootApp).to receive(:advanced_search_allowed?).and_return(false)
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(true)
|
||||
allow(account).to receive(:feature_enabled?).with('advanced_search').and_return(true)
|
||||
params = { q: 'wizard', since: 50.days.ago.to_i, search_type: 'Message' }
|
||||
search = described_class.new(current_user: user, current_account: account, params: params, search_type: 'Message')
|
||||
results = search.perform[:messages]
|
||||
|
||||
expect(results.map(&:id)).to include(recent_message.id, agent_message.id, inbox2_message.id)
|
||||
expect(results.map(&:id)).not_to include(old_message.id)
|
||||
end
|
||||
|
||||
it 'filters messages by sender (contact)' do
|
||||
allow(ChatwootApp).to receive(:advanced_search_allowed?).and_return(false)
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(false)
|
||||
allow(account).to receive(:feature_enabled?).with('advanced_search').and_return(true)
|
||||
params = { q: 'wizard', from: "contact:#{harry.id}", search_type: 'Message' }
|
||||
search = described_class.new(current_user: user, current_account: account, params: params, search_type: 'Message')
|
||||
results = search.perform[:messages]
|
||||
|
||||
expect(results.map(&:id)).to include(recent_message.id, old_message.id, inbox2_message.id)
|
||||
expect(results.map(&:id)).not_to include(agent_message.id)
|
||||
end
|
||||
|
||||
it 'filters messages by sender (agent)' do
|
||||
allow(ChatwootApp).to receive(:advanced_search_allowed?).and_return(false)
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(false)
|
||||
allow(account).to receive(:feature_enabled?).with('advanced_search').and_return(true)
|
||||
params = { q: 'wizard', from: "agent:#{agent.id}", search_type: 'Message' }
|
||||
search = described_class.new(current_user: user, current_account: account, params: params, search_type: 'Message')
|
||||
results = search.perform[:messages]
|
||||
|
||||
expect(results.map(&:id)).to include(agent_message.id)
|
||||
expect(results.map(&:id)).not_to include(recent_message.id, old_message.id, inbox2_message.id)
|
||||
end
|
||||
|
||||
it 'filters messages by inbox' do
|
||||
allow(ChatwootApp).to receive(:advanced_search_allowed?).and_return(false)
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(false)
|
||||
allow(account).to receive(:feature_enabled?).with('advanced_search').and_return(true)
|
||||
params = { q: 'wizard', inbox_id: inbox2.id, search_type: 'Message' }
|
||||
search = described_class.new(current_user: user, current_account: account, params: params, search_type: 'Message')
|
||||
results = search.perform[:messages]
|
||||
|
||||
expect(results.map(&:id)).to include(inbox2_message.id)
|
||||
expect(results.map(&:id)).not_to include(recent_message.id, old_message.id, agent_message.id)
|
||||
end
|
||||
|
||||
it 'combines multiple filters' do
|
||||
allow(ChatwootApp).to receive(:advanced_search_allowed?).and_return(false)
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(false)
|
||||
allow(account).to receive(:feature_enabled?).with('advanced_search').and_return(true)
|
||||
params = { q: 'wizard', since: 50.days.ago.to_i, inbox_id: inbox.id, from: "contact:#{harry.id}", search_type: 'Message' }
|
||||
search = described_class.new(current_user: user, current_account: account, params: params, search_type: 'Message')
|
||||
results = search.perform[:messages]
|
||||
|
||||
expect(results.map(&:id)).to include(recent_message.id)
|
||||
expect(results.map(&:id)).not_to include(old_message.id, agent_message.id, inbox2_message.id)
|
||||
end
|
||||
end
|
||||
# rubocop:enable RSpec/MultipleMemoizedHelpers
|
||||
end
|
||||
|
||||
context 'when conversation search' do
|
||||
@@ -183,6 +289,91 @@ describe SearchService do
|
||||
expect(results.length).to eq(15) # Default per_page is 15
|
||||
end
|
||||
end
|
||||
|
||||
context 'when filtering contacts with time caps', :opensearch do
|
||||
let!(:old_contact) { create(:contact, name: 'Old Potter', email: 'old@test.com', account: account, last_activity_at: 100.days.ago) }
|
||||
let!(:recent_contact) { create(:contact, name: 'Recent Potter', email: 'recent@test.com', account: account, last_activity_at: 1.day.ago) }
|
||||
|
||||
before do
|
||||
account.enable_features!('advanced_search')
|
||||
end
|
||||
|
||||
it 'caps since to 90 days ago and excludes older contacts' do
|
||||
params = { q: 'Potter', since: 100.days.ago.to_i, search_type: 'Contact' }
|
||||
search = described_class.new(current_user: user, current_account: account, params: params, search_type: 'Contact')
|
||||
results = search.perform[:contacts]
|
||||
|
||||
expect(results.map(&:id)).not_to include(old_contact.id)
|
||||
expect(results.map(&:id)).to include(recent_contact.id)
|
||||
end
|
||||
|
||||
it 'caps until to 90 days from now' do
|
||||
params = { q: 'Potter', until: 100.days.from_now.to_i, search_type: 'Contact' }
|
||||
search = described_class.new(current_user: user, current_account: account, params: params, search_type: 'Contact')
|
||||
results = search.perform[:contacts]
|
||||
|
||||
# Both contacts should be included since their last_activity_at is before the capped time
|
||||
expect(results.map(&:id)).to include(recent_contact.id)
|
||||
end
|
||||
end
|
||||
|
||||
context 'when filtering conversations with time caps', :opensearch do
|
||||
let!(:old_conversation) { create(:conversation, contact: harry, inbox: inbox, account: account, last_activity_at: 100.days.ago) }
|
||||
let!(:recent_conversation) { create(:conversation, contact: harry, inbox: inbox, account: account, last_activity_at: 1.day.ago) }
|
||||
|
||||
before do
|
||||
account.enable_features!('advanced_search')
|
||||
end
|
||||
|
||||
it 'caps since to 90 days ago and excludes older conversations' do
|
||||
params = { q: 'Harry', since: 100.days.ago.to_i, search_type: 'Conversation' }
|
||||
search = described_class.new(current_user: user, current_account: account, params: params, search_type: 'Conversation')
|
||||
results = search.perform[:conversations]
|
||||
|
||||
expect(results.map(&:id)).not_to include(old_conversation.id)
|
||||
expect(results.map(&:id)).to include(recent_conversation.id)
|
||||
end
|
||||
|
||||
it 'caps until to 90 days from now' do
|
||||
params = { q: 'Harry', until: 100.days.from_now.to_i, search_type: 'Conversation' }
|
||||
search = described_class.new(current_user: user, current_account: account, params: params, search_type: 'Conversation')
|
||||
results = search.perform[:conversations]
|
||||
|
||||
# Both conversations should be included since their last_activity_at is before the capped time
|
||||
expect(results.map(&:id)).to include(recent_conversation.id)
|
||||
end
|
||||
end
|
||||
|
||||
context 'when filtering articles with time caps', :opensearch do
|
||||
let!(:old_article) do
|
||||
create(:article, title: 'Old Magic Guide', account: account, portal: portal, author: user, status: 'published', updated_at: 100.days.ago)
|
||||
end
|
||||
let!(:recent_article) do
|
||||
create(:article, title: 'Recent Magic Guide', account: account, portal: portal, author: user, status: 'published', updated_at: 1.day.ago)
|
||||
end
|
||||
|
||||
before do
|
||||
account.enable_features!('advanced_search')
|
||||
end
|
||||
|
||||
it 'caps since to 90 days ago and excludes older articles' do
|
||||
params = { q: 'Magic', since: 100.days.ago.to_i, search_type: 'Article' }
|
||||
search = described_class.new(current_user: user, current_account: account, params: params, search_type: 'Article')
|
||||
results = search.perform[:articles]
|
||||
|
||||
expect(results.map(&:id)).not_to include(old_article.id)
|
||||
expect(results.map(&:id)).to include(recent_article.id)
|
||||
end
|
||||
|
||||
it 'caps until to 90 days from now' do
|
||||
params = { q: 'Magic', until: 100.days.from_now.to_i, search_type: 'Article' }
|
||||
search = described_class.new(current_user: user, current_account: account, params: params, search_type: 'Article')
|
||||
results = search.perform[:articles]
|
||||
|
||||
# Both articles should be included since their updated_at is before the capped time
|
||||
expect(results.map(&:id)).to include(recent_article.id)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
describe '#message_base_query' do
|
||||
@@ -260,4 +451,306 @@ describe SearchService do
|
||||
expect(search.send(:use_gin_search)).to be false
|
||||
end
|
||||
end
|
||||
|
||||
describe '#advanced_search with filters', if: Message.respond_to?(:search) do
|
||||
let(:params) { { q: 'test' } }
|
||||
let(:search_type) { 'Message' }
|
||||
|
||||
before do
|
||||
allow(ChatwootApp).to receive(:advanced_search_allowed?).and_return(true)
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('advanced_search').and_return(true)
|
||||
allow(Message).to receive(:search).and_return([])
|
||||
end
|
||||
|
||||
context 'when advanced_search feature flag is disabled' do
|
||||
it 'ignores filters and falls back to standard search' do
|
||||
allow(ChatwootApp).to receive(:advanced_search_allowed?).and_return(false)
|
||||
contact = create(:contact, account: account)
|
||||
inbox2 = create(:inbox, account: account)
|
||||
|
||||
params = { q: 'test', from: "contact:#{contact.id}", inbox_id: inbox2.id, since: 3.days.ago.to_i }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
expect(search_service).not_to receive(:advanced_search)
|
||||
search_service.perform
|
||||
end
|
||||
end
|
||||
|
||||
context 'when filtering by from parameter' do
|
||||
let(:contact) { create(:contact, account: account) }
|
||||
let(:agent) { create(:user, account: account) }
|
||||
|
||||
it 'filters messages from specific contact' do
|
||||
params = { q: 'test', from: "contact:#{contact.id}" }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
expect(Message).to receive(:search).with(
|
||||
'test',
|
||||
hash_including(
|
||||
where: hash_including(
|
||||
sender_type: 'Contact',
|
||||
sender_id: contact.id
|
||||
)
|
||||
)
|
||||
).and_return([])
|
||||
|
||||
search_service.perform
|
||||
end
|
||||
|
||||
it 'filters messages from specific agent' do
|
||||
params = { q: 'test', from: "agent:#{agent.id}" }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
expect(Message).to receive(:search).with(
|
||||
'test',
|
||||
hash_including(
|
||||
where: hash_including(
|
||||
sender_type: 'User',
|
||||
sender_id: agent.id
|
||||
)
|
||||
)
|
||||
).and_return([])
|
||||
|
||||
search_service.perform
|
||||
end
|
||||
|
||||
it 'ignores invalid from parameter format' do
|
||||
params = { q: 'test', from: 'invalid:format' }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
expect(Message).to receive(:search).with(
|
||||
'test',
|
||||
hash_including(
|
||||
where: hash_not_including(:sender_type, :sender_id)
|
||||
)
|
||||
).and_return([])
|
||||
|
||||
search_service.perform
|
||||
end
|
||||
end
|
||||
|
||||
context 'when filtering by time range' do
|
||||
it 'defaults to 90 days ago when no since parameter is provided' do
|
||||
params = { q: 'test' }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
expect(Message).to receive(:search).with(
|
||||
'test',
|
||||
hash_including(
|
||||
where: hash_including(
|
||||
created_at: hash_including(gte: be_within(1.second).of(Limits::MESSAGE_SEARCH_TIME_RANGE_LIMIT_DAYS.days.ago))
|
||||
)
|
||||
)
|
||||
).and_return([])
|
||||
|
||||
search_service.perform
|
||||
end
|
||||
|
||||
it 'silently caps since timestamp to 90 day limit when exceeded' do
|
||||
since_timestamp = (Limits::MESSAGE_SEARCH_TIME_RANGE_LIMIT_DAYS * 2).days.ago.to_i
|
||||
params = { q: 'test', since: since_timestamp }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
expect(Message).to receive(:search).with(
|
||||
'test',
|
||||
hash_including(
|
||||
where: hash_including(
|
||||
created_at: hash_including(gte: be_within(1.second).of(Limits::MESSAGE_SEARCH_TIME_RANGE_LIMIT_DAYS.days.ago))
|
||||
)
|
||||
)
|
||||
).and_return([])
|
||||
|
||||
search_service.perform
|
||||
end
|
||||
|
||||
it 'filters messages since timestamp when within 90 day limit' do
|
||||
since_timestamp = 3.days.ago.to_i
|
||||
params = { q: 'test', since: since_timestamp }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
expect(Message).to receive(:search).with(
|
||||
'test',
|
||||
hash_including(
|
||||
where: hash_including(
|
||||
created_at: hash_including(gte: Time.zone.at(since_timestamp))
|
||||
)
|
||||
)
|
||||
).and_return([])
|
||||
|
||||
search_service.perform
|
||||
end
|
||||
|
||||
it 'filters messages until timestamp' do
|
||||
until_timestamp = 5.days.ago.to_i
|
||||
params = { q: 'test', until: until_timestamp }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
expect(Message).to receive(:search).with(
|
||||
'test',
|
||||
hash_including(
|
||||
where: hash_including(
|
||||
created_at: hash_including(lte: Time.zone.at(until_timestamp))
|
||||
)
|
||||
)
|
||||
).and_return([])
|
||||
|
||||
search_service.perform
|
||||
end
|
||||
|
||||
it 'filters messages within time range' do
|
||||
since_timestamp = 5.days.ago.to_i
|
||||
until_timestamp = 12.hours.ago.to_i
|
||||
params = { q: 'test', since: since_timestamp, until: until_timestamp }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
expect(Message).to receive(:search).with(
|
||||
'test',
|
||||
hash_including(
|
||||
where: hash_including(
|
||||
created_at: hash_including(
|
||||
gte: Time.zone.at(since_timestamp),
|
||||
lte: Time.zone.at(until_timestamp)
|
||||
)
|
||||
)
|
||||
)
|
||||
).and_return([])
|
||||
|
||||
search_service.perform
|
||||
end
|
||||
|
||||
it 'silently caps until timestamp to 90 days from now when exceeded' do
|
||||
until_timestamp = 100.days.from_now.to_i
|
||||
params = { q: 'test', until: until_timestamp }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
expect(Message).to receive(:search).with(
|
||||
'test',
|
||||
hash_including(
|
||||
where: hash_including(
|
||||
created_at: hash_including(lte: be_within(1.second).of(90.days.from_now))
|
||||
)
|
||||
)
|
||||
).and_return([])
|
||||
|
||||
search_service.perform
|
||||
end
|
||||
end
|
||||
|
||||
context 'when filtering by inbox_id' do
|
||||
let!(:inbox2) { create(:inbox, account: account) }
|
||||
|
||||
before do
|
||||
create(:inbox_member, user: user, inbox: inbox2)
|
||||
end
|
||||
|
||||
it 'filters messages from specific inbox' do
|
||||
params = { q: 'test', inbox_id: inbox2.id }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
expect(Message).to receive(:search).with(
|
||||
'test',
|
||||
hash_including(
|
||||
where: hash_including(inbox_id: inbox2.id)
|
||||
)
|
||||
).and_return([])
|
||||
|
||||
search_service.perform
|
||||
end
|
||||
|
||||
it 'ignores inbox filter when user lacks access' do
|
||||
restricted_inbox = create(:inbox, account: account)
|
||||
params = { q: 'test', inbox_id: restricted_inbox.id }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
expect(Message).to receive(:search).with(
|
||||
'test',
|
||||
hash_including(
|
||||
where: hash_not_including(inbox_id: restricted_inbox.id)
|
||||
)
|
||||
).and_return([])
|
||||
|
||||
search_service.perform
|
||||
end
|
||||
end
|
||||
|
||||
context 'when combining multiple filters' do
|
||||
it 'applies all filters together' do
|
||||
test_contact = create(:contact, account: account)
|
||||
test_inbox = create(:inbox, account: account)
|
||||
create(:inbox_member, user: user, inbox: test_inbox)
|
||||
|
||||
since_timestamp = 3.days.ago.to_i
|
||||
params = { q: 'test', from: "contact:#{test_contact.id}", inbox_id: test_inbox.id, since: since_timestamp }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
expect(Message).to receive(:search).with(
|
||||
'test',
|
||||
hash_including(
|
||||
where: hash_including(
|
||||
sender_type: 'Contact',
|
||||
sender_id: test_contact.id,
|
||||
inbox_id: test_inbox.id,
|
||||
created_at: hash_including(gte: Time.zone.at(since_timestamp))
|
||||
)
|
||||
)
|
||||
).and_return([])
|
||||
|
||||
search_service.perform
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
describe '#advanced_search_with_fallback' do
|
||||
let(:params) { { q: 'test' } }
|
||||
let(:search_type) { 'Message' }
|
||||
|
||||
context 'when Elasticsearch is unavailable' do
|
||||
it 'falls back to LIKE search when Elasticsearch connection fails' do
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('advanced_search').and_return(true)
|
||||
allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(false)
|
||||
|
||||
params = { q: 'test' }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
allow(search_service).to receive(:advanced_search).and_raise(Faraday::ConnectionFailed.new('Connection refused'))
|
||||
|
||||
expect(search_service).to receive(:filter_messages_with_like).and_call_original
|
||||
expect { search_service.perform }.not_to raise_error
|
||||
end
|
||||
|
||||
it 'falls back to GIN search when Elasticsearch is unavailable and GIN is enabled' do
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('advanced_search').and_return(true)
|
||||
allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(true)
|
||||
|
||||
params = { q: 'test' }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
allow(search_service).to receive(:advanced_search).and_raise(Searchkick::Error.new('Elasticsearch unavailable'))
|
||||
|
||||
expect(search_service).to receive(:filter_messages_with_gin).and_call_original
|
||||
expect { search_service.perform }.not_to raise_error
|
||||
end
|
||||
|
||||
it 'applies filters correctly in SQL fallback when Elasticsearch fails' do
|
||||
allow(account).to receive(:feature_enabled?).and_call_original
|
||||
allow(account).to receive(:feature_enabled?).with('advanced_search').and_return(true)
|
||||
allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(false)
|
||||
|
||||
test_contact = create(:contact, account: account)
|
||||
create(:message, account: account, inbox: inbox, content: 'test message', sender: test_contact, created_at: 1.day.ago)
|
||||
|
||||
params = { q: 'test', from: "contact:#{test_contact.id}", since: 2.days.ago.to_i }
|
||||
search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
|
||||
|
||||
allow(search_service).to receive(:advanced_search).and_raise(Faraday::ConnectionFailed.new('Connection refused'))
|
||||
|
||||
results = search_service.perform[:messages]
|
||||
expect(results).not_to be_empty
|
||||
expect(results.first.sender_id).to eq(test_contact.id)
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
40
spec/support/opensearch_check.rb
Normal file
40
spec/support/opensearch_check.rb
Normal file
@@ -0,0 +1,40 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
require 'net/http'
|
||||
require 'json'
|
||||
|
||||
RSpec.configure do |config|
|
||||
# Run OpenSearch connectivity check only for specs tagged with :opensearch
|
||||
config.before(:context, :opensearch) do
|
||||
opensearch_url = ENV.fetch('OPENSEARCH_URL', nil)
|
||||
|
||||
next if opensearch_url.blank?
|
||||
|
||||
puts "\n==== OpenSearch Connectivity Check ===="
|
||||
puts "OPENSEARCH_URL: #{opensearch_url}"
|
||||
|
||||
begin
|
||||
uri = URI.parse("#{opensearch_url}/_cluster/health")
|
||||
response = Net::HTTP.get_response(uri)
|
||||
|
||||
raise "OpenSearch is not reachable at #{opensearch_url}. HTTP Status: #{response.code}" unless response.is_a?(Net::HTTPSuccess)
|
||||
|
||||
health = JSON.parse(response.body)
|
||||
status = health['status']
|
||||
|
||||
puts "Cluster status: #{status}"
|
||||
puts "Cluster name: #{health['cluster_name']}"
|
||||
puts "Number of nodes: #{health['number_of_nodes']}"
|
||||
|
||||
raise "OpenSearch cluster is not healthy. Status: #{status}" unless %w[green yellow].include?(status)
|
||||
|
||||
puts '✓ OpenSearch is healthy and ready for tests'
|
||||
puts "========================================\n\n"
|
||||
rescue StandardError => e
|
||||
puts "\n❌ ERROR: Failed to connect to OpenSearch"
|
||||
puts "Message: #{e.message}"
|
||||
puts "========================================\n\n"
|
||||
raise "OpenSearch connectivity check failed: #{e.message}"
|
||||
end
|
||||
end
|
||||
end
|
||||
Reference in New Issue
Block a user