feat: create related prompts module #1642

victorcg88 · 2024-10-22T13:50:08Z

Pull request template

The Related Prompts module. Includes:

The Related Prompts store including query, status, and extra params.
The RelatedPrompt component. Including three slots: header, next queries, and query-preview.
The RelatedPromptList component. Same functionality as the NextQueriesList component. (Injects related prompts in the results list)

Motivation and context

Dependencies. If any, specify:
Open issue. If applicable, link:

Type of change

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Breaking change (fix or feature that causes existing functionality to not work as expected)
Change requires a documentation update

What is the destination branch of this PR?

Main
Other. Specify: https://github.com/empathyco/x/tree/feat/add-related-prompts-adapter

How has this been tested?

Tests performed according to testing guidelines:

Checklist:

My code follows the style guidelines of this project.
I have performed a self-review on my own code.
I have commented my code, particularly in hard-to-understand areas.
I have made corresponding changes to the documentation.
My changes generate no new warnings.
I have added tests that prove my fix is effective or that my feature works.
New and existing unit tests pass locally with my changes.

* feat(x-installer): update to vue3 and adapt x-installer * feat(x-installer): simplify internal createApp fn * feat(scroll): fix import path * feat(component): keep injector const export * feat(mixins): removing deprecated mixins

BREAKING-CHANGE: refactors the GlobalXBus to use a prop to receive the listeners instead of relying on attributes.

This PR resolves several warnings when running the internal demo app: - Initial warning about overwriting the store modules. - Warnings about `v-on="listeners"` deprecation. - Removal of `v-bind="attrs"` and `inheritAttrs=false`, because Vue3 implemented by default the attributes inheritance. - Fixing warning on `attrs` inheritance in RenderlessFilter. - Fixing some components that throw warnings because the render function was incorrect.

…rective and deprecated layouts (#1576) * get rid of deprecated `MultiColumnMaxWidthLayout` * Revert "get rid of deprecated `MultiColumnMaxWidthLayout`" This reverts commit 7fd0374. * fix(list-components): fix list components, migrate infinite-scroll directive and deprecated layouts * fix(list-components): avoid injecting undefined default value since Vue does it

* refactor(animation-factory): fix Vue3 breaking changes * refactor(animation-factory): await animation to load * refactor(animation-factory): improve type infer * refactor(animations): Vue3 transition class breaking change

…sable (#1583)

* test(components): propsData is now props * test(components): revert skip on test cases * test(components): fix duplicated bus instance * test(components): provide moved inside global property * test(components): remove useless nextTick() * test(components): update jsdoc for installNewXPlugin()

…ushing them (#1597)

Co-authored-by: Diego Pascual <[email protected]>

…on (#1578) Co-authored-by: Jose A. Cabaneros <[email protected]>

Co-authored-by: Diego Pascual <[email protected]>

)

BREAKING CHANGE: @empathyco/x-archetype-utils is only compatible with vue 3

…1607) Co-authored-by: Víctor CG <[email protected]>

BREAKING CHANGE: @empathyco/x-components v6 and @empathyco/x-archetype-utils v2 are only compatible with Vue 3 and if you are looking for the Vue 2 versions, take look at the main brach.

- [email protected] - @empathyco/[email protected] - @empathyco/[email protected] - @empathyco/[email protected]

* test: fix experience-controls and tagging tests * test: fix scroll module and clear-search-input tests * test:fix related-tag test * test: fix tests in search module * test: fix tests in history-queries module * test: fix x-modules tests * tests: QueryPreview * test: fix semantic queries test * test: fix semantic query test * test: fix x-modules tests * test: query preview button test * test: use queries preview composable * test: queries preview getter * fix e2e tests * fix e2e tests * test: rm unneeded reset in queries preview composable * test: query preview actions test * test: query preview utils test * test: fix x-modules tests * test: fix x-modules tests * test: query preview list test * test: fix facets module tests * test: adjust some filters lists tests * test: facets getter test * test: use-filters-injection composable * test: fix facets module tests * test: test facets-service * test: adapt some filters tests * test: rm localVue from url module's utils * test: fix tagging actions test * test: fix pdp-add-to-cart service * test: fix search button test * test: fix semantics module tests * test: fix experience-controls getter test * test: adjust selected-filters-list test * test: fix getters-proxy.spec.ts * test: fix search input test * test: fix search input placeholder test * test: fix search box module actions test * test: fix facets-provider.spec.ts * test: adjust preselected-filters test * test: fix base-event-button and use-x-bus test sheets * test: fix test sheets of filter components * test: fix highlight and result-variants-provider-and-selector tests --------- Co-authored-by: Diego Pascual <[email protected]> Co-authored-by: albertjcuac <[email protected]> Co-authored-by: acondal <[email protected]> Co-authored-by: Jose Antonio Cabañeros <[email protected]>

- @empathyco/[email protected]

…ed-prompts-adapter

…mpts-module

diegopf · 2024-10-31T11:19:33Z

packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="x-related-prompt x-bg-neutral-10 x-p-24 x-flex x-flex-col x-gap-16"


I'm not sure about the styling. Usually we don't add those styles to the x-component and we leave it to the consumer to style it as desired.

diegopf · 2024-10-31T11:20:39Z

packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue

+              v-for="(nextQuery, index) in relatedPrompt.nextQueries"
+              :key="index"
+              @click="onClick(nextQuery)"
+              class="x-button x-button-lead x-button-sm x-button-outlined x-rounded-sm x-border-lead-50 x-text-neutral-75 hover:x-text-neutral-0 selected:x-text-neutral-0 selected:hover:x-bg-lead-50"


Same here. Probably is better to have a prop to pass the desired classes. This way is easier from the outside customize the UI

annacv · 2024-10-31T15:06:50Z

packages/x-components/src/views/home/Home.vue

@@ -390,8 +390,9 @@

                          <template #related-prompts-group="{ item: { relatedPrompts } }">
                            <RelatedPrompt
-                              class="x-flex x-flex-col x-pt-24"
+                              class="x-bg-neutral-10 x-flex x-flex-col x-gap-16 x-pt-24"


Hi, maybe this background is another possible customizable style for customers, maybe we could add a containerClass in the component to handle this attribute, which could also be used to add the gap & other spacing

You can already achieve this by attribute inheritance. Those classes will fall to the root element inside RelatedPrompt, just like is done here.

annacv · 2024-10-31T15:08:46Z

packages/x-components/src/views/home/Home.vue

                              :relatedPrompt="relatedPrompts[0]"
+                              nextQueryButtonClass="x-button x-button-lead x-button-sm x-button-outlined"


Hi, IMO the x-button class would rely on the component itself, the rest of them ok here

annacv · 2024-10-31T15:10:43Z

packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue

            <button
              v-for="(nextQuery, index) in relatedPrompt.nextQueries"
              :key="index"
              @click="onClick(nextQuery)"
-              class="x-button x-button-lead x-button-sm x-button-outlined x-rounded-sm x-border-lead-50 x-text-neutral-75 hover:x-text-neutral-0 selected:x-text-neutral-0 selected:hover:x-bg-lead-50"
-              :class="{ 'x-selected': selectedNextQuery === nextQuery }"
+              :class="[{ 'x-selected': selectedNextQuery === nextQuery }, nextQueryButtonClass]"


Hi, I would name it buttonClass so it is shorter

There are more than one button, I think it's better to have a more clear name for this

annacv · 2024-10-31T15:14:20Z

packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue

-                class="x-whitespace-nowrap"
-                :class="
-                  selectedNextQuery === nextQuery ? 'x-title3 x-title3-md' : 'x-text1 x-text1-lg'
-                "
-              >
-                {{ nextQuery }}
-              </span>
+              <span>{{ nextQuery }}</span>
              <CrossTinyIcon v-if="selectedNextQuery === nextQuery" class="x-icon" />
              <PlusIcon v-else class="x-icon" />


Maybe it is worth also adding a slot for the item

annacv · 2024-10-31T15:20:15Z

Hi @victorcg88! Great job!
I've added some suggestions, & I miss the generic component description above the defineComponent f() in related-prompt.vue.

victorcg88 and others added 30 commits July 23, 2024 17:05

feat: make internal demo app functional (#1574)

a485dea

BREAKING-CHANGE: refactors the GlobalXBus to use a prop to receive the listeners instead of relying on attributes.

refactor(v-deep): replace by :deep() (#1577)

71c08db

test(vue-jest): update vue-jest dependency (#1581)

46ff08b

refactor(render-function): clear void calls (#1580)

7875ff5

fix(infinite-scroll): getting xBus from XPlugin instead useXBus

b936ae5

refactor(animation-factory): fix Vue3 breaking changes (#1579)

f915731

* refactor(animation-factory): fix Vue3 breaking changes * refactor(animation-factory): await animation to load * refactor(animation-factory): improve type infer * refactor(animations): Vue3 transition class breaking change

refactor: get rid of NoElement component and useNoElementRender compo…

059eecc

…sable (#1583)

refactor(base-switch): migrate component to vue3 (#1588)

875a6e2

test(auto-progress-bar): fix test after Vue3 update (#1582)

335c370

refactor(base-switch): decommission of value prop (#1589)

35968eb

Merge branch 'main' into vue3-update-rc

40f6f66

fix: adjust to new vue render function API (#1596)

7ec2b97

fix(search): replace results state to append new results instead of p…

e64e3cb

…ushing them (#1597)

test(components) fix tests after vue3 update (#1599)

f9e716a

Co-authored-by: Diego Pascual <[email protected]>

refactor(staggered-fade-and-slide): use Vue native staggered transiti…

79e136f

…on (#1578) Co-authored-by: Jose A. Cabaneros <[email protected]>

merge main branch

f6350c0

build: adjust rollup production build for Vue3 (#1603)

ed587b1

Co-authored-by: Diego Pascual <[email protected]>

fix build for x-tailwindcss

fe6fffb

fix(layout): avoid shared CSS classes between layouts with scoped (#1605

b3cc3f5

)

ci(linter): fix linter issues to pass the CI (#1606)

aff3151

feat: bump vue18n version (#1604)

9320c57

BREAKING CHANGE: @empathyco/x-archetype-utils is only compatible with vue 3

feat(rollup): update replace config to align CSS injector with Vue 3 (#…

b98a31e

…1607) Co-authored-by: Víctor CG <[email protected]>

feat: bump packages versions (#1611)

eb7d377

BREAKING CHANGE: @empathyco/x-components v6 and @empathyco/x-archetype-utils v2 are only compatible with Vue 3 and if you are looking for the Vue 2 versions, take look at the main brach.

Merge branch 'main' into vue3-update-rc

ada9f4a

chore(release): publish

701cfef

- [email protected] - @empathyco/[email protected] - @empathyco/[email protected] - @empathyco/[email protected]

empathy/x and others added 7 commits September 25, 2024 12:39

chore(release): publish

bc8374d

- @empathyco/[email protected]

fix(scroll): scroll direction inconsistency (#1629)

ad970ae

chore(release): publish

56dc022

- @empathyco/[email protected]

Merge remote-tracking branch 'origin/main' into vue3-update-rc

1aadc42

feat: add types for related prompts

fb4ae07

feat: add adapter for related prompts

0c59fc9

feat: create related prompts module

45ae37d

victorcg88 force-pushed the feat/related-prompts-module branch from c364d7b to 45ae37d Compare October 22, 2024 14:19

victorcg88 added 5 commits October 22, 2024 17:10

feat: integrate RelatedPrompts in demo app

89978e8

Merge branch 'main' into feat/add-types-for-related-prompts

7579245

Merge branch 'feat/add-types-for-related-prompts' into feat/add-relat…

370647a

…ed-prompts-adapter

Merge branch 'feat/add-related-prompts-adapter' into feat/related-pro…

f9d5b10

…mpts-module

test: test for RP module and doc for related-prompts-list

976f943

victorcg88 marked this pull request as ready for review October 28, 2024 14:42

victorcg88 requested a review from a team as a code owner October 28, 2024 14:42

Base automatically changed from feat/add-related-prompts-adapter to main October 28, 2024 15:24

Merge branch 'main' into feat/related-prompts-module

89485e4

diegopf reviewed Oct 31, 2024

View reviewed changes

victorcg88 added 2 commits October 31, 2024 13:17

remove styling classes and add prop to customize next queries button

69e9976

Merge branch 'main' into feat/related-prompts-module

3ed7870

annacv reviewed Oct 31, 2024

View reviewed changes

add next query slot and remove tailwind use

16778d4

diegopf approved these changes Nov 1, 2024

View reviewed changes

annacv approved these changes Nov 1, 2024

View reviewed changes

annacv merged commit 36cdcc6 into main Nov 1, 2024
4 checks passed

annacv deleted the feat/related-prompts-module branch November 1, 2024 09:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: create related prompts module #1642

feat: create related prompts module #1642

victorcg88 commented Oct 22, 2024 •

edited

Loading

diegopf Oct 31, 2024

diegopf Oct 31, 2024

annacv Oct 31, 2024

victorcg88 Oct 31, 2024

annacv Oct 31, 2024 •

edited

Loading

annacv Oct 31, 2024 •

edited

Loading

diegopf Oct 31, 2024

annacv Oct 31, 2024

annacv commented Oct 31, 2024

		:relatedPrompt="relatedPrompts[0]"
		nextQueryButtonClass="x-button x-button-lead x-button-sm x-button-outlined"

feat: create related prompts module #1642

feat: create related prompts module #1642

Conversation

victorcg88 commented Oct 22, 2024 • edited Loading

Pull request template

Motivation and context

Type of change

What is the destination branch of this PR?

How has this been tested?

Checklist:

diegopf Oct 31, 2024

Choose a reason for hiding this comment

diegopf Oct 31, 2024

Choose a reason for hiding this comment

annacv Oct 31, 2024

Choose a reason for hiding this comment

victorcg88 Oct 31, 2024

Choose a reason for hiding this comment

annacv Oct 31, 2024 • edited Loading

Choose a reason for hiding this comment

annacv Oct 31, 2024 • edited Loading

Choose a reason for hiding this comment

diegopf Oct 31, 2024

Choose a reason for hiding this comment

annacv Oct 31, 2024

Choose a reason for hiding this comment

annacv commented Oct 31, 2024

victorcg88 commented Oct 22, 2024 •

edited

Loading

annacv Oct 31, 2024 •

edited

Loading

annacv Oct 31, 2024 •

edited

Loading