Skip to content

Commit

Permalink
refactor: move clear chat to chat component
Browse files Browse the repository at this point in the history
  • Loading branch information
@g-francesca
g-francesca committed Jul 26, 2024
1 parent 9a9eb4f commit 2cf569a
Show file tree
Hide file tree
Showing 10 changed files with 41 additions and 35 deletions.
2 changes: 1 addition & 1 deletion apps/storybook/stories/public/orama-chat-box.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ type Story = StoryObj<Components.OramaChatBox>
export const ChatBox: Story = {
args: {
placeholder: 'What do you want to learn about Orama?',
sourceBaseURL: 'https://docs.orama.com',
sourceBaseUrl: 'https://docs.orama.com',
index: {
api_key: demoIndexes.orama.api_key,
endpoint: demoIndexes.orama.endpoint,
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-stencil-vue/lib/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const OramaButton = /*@__PURE__*/ defineContainer<JSX.OramaButton>('orama

export const OramaChat = /*@__PURE__*/ defineContainer<JSX.OramaChat>('orama-chat', undefined, [
'placeholder',
'sourceBaseURL'
'sourceBaseUrl'
]);


Expand All @@ -31,7 +31,7 @@ export const OramaChatAssistentMessage = /*@__PURE__*/ defineContainer<JSX.Orama

export const OramaChatBox = /*@__PURE__*/ defineContainer<JSX.OramaChatBox>('orama-chat-box', undefined, [
'index',
'sourceBaseURL',
'sourceBaseUrl',
'placeholder'
]);

Expand Down
12 changes: 6 additions & 6 deletions packages/ui-stencil/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,15 @@ export namespace Components {
}
interface OramaChat {
"placeholder"?: string;
"sourceBaseURL"?: string;
"sourceBaseUrl"?: string;
}
interface OramaChatAssistentMessage {
"interaction": TChatInteraction;
}
interface OramaChatBox {
"index": CloudIndexConfig;
"placeholder"?: any;
"sourceBaseURL"?: any;
"placeholder"?: string;
"sourceBaseUrl"?: string;
}
interface OramaChatMessagesContainer {
"interactions": TChatInteraction[];
Expand Down Expand Up @@ -312,15 +312,15 @@ declare namespace LocalJSX {
}
interface OramaChat {
"placeholder"?: string;
"sourceBaseURL"?: string;
"sourceBaseUrl"?: string;
}
interface OramaChatAssistentMessage {
"interaction"?: TChatInteraction;
}
interface OramaChatBox {
"index"?: CloudIndexConfig;
"placeholder"?: any;
"sourceBaseURL"?: any;
"placeholder"?: string;
"sourceBaseUrl"?: string;
}
interface OramaChatMessagesContainer {
"interactions"?: TChatInteraction[];
Expand Down
6 changes: 5 additions & 1 deletion ...ges/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@
.suggestion-button {
@include span();
cursor: pointer;

border-radius: var(--radius-l, $radius-l);
border: 1px solid var(--border-color-primary, border-color('primary'));
padding: var(--spacing-m, $spacing-m) var(--spacing-m, $spacing-m);
Expand All @@ -44,6 +43,11 @@
}
}

&:focus-visible {
outline: none;
border: 1px solid var(--border-color-accent, border-color('accent'));
}

@media (--md-min) {
padding: var(--spacing-xs, $spacing-xs) var(--spacing-m, $spacing-m);
}
Expand Down
15 changes: 12 additions & 3 deletions packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const BOTTOM_THRESHOLD = 1
})
export class OramaChat {
@Prop() placeholder?: string = 'Ask me anything'
@Prop() sourceBaseURL?: string = ''
@Prop() sourceBaseUrl?: string = ''
@State() inputValue = ''
messagesContainerRef!: HTMLElement
isScrolling = false
Expand Down Expand Up @@ -97,7 +97,7 @@ export class OramaChat {
componentDidLoad() {
this.messagesContainerRef.addEventListener('wheel', this.handleWheel)
this.recalculateLockOnBottom()
chatContext.sourceBaseURL = this.sourceBaseURL
chatContext.sourceBaseURL = this.sourceBaseUrl
}

handleSubmit = (e: Event) => {
Expand All @@ -121,7 +121,6 @@ export class OramaChat {
}

render() {
// get latest interactions
const lastInteraction = chatContext.interactions?.[chatContext.interactions.length - 1]
const lastInteractionStatus = lastInteraction?.status
const lastInteractionStreaming = lastInteractionStatus === TAnswerStatus.streaming
Expand All @@ -130,8 +129,18 @@ export class OramaChat {
this.scrollToBottom({ animated: false })
}

// ? Question: Maybe should be a orama-button variant?
return (
<Host>
<div class={{ header: true, hidden: chatContext.interactions?.length === 0 }}>
<button
type="button"
onClick={() => chatContext.chatService.resetChat()}
aria-hidden={chatContext.interactions?.length === 0}
>
<ph-arrow-clockwise weight="fill" size="14" /> Clear chat
</button>
</div>
{/* CHAT MESSAGES */}
<div class={'messages-container-wrapper-non-scrollable'}>
<div class="messages-container-wrapper" ref={(ref) => (this.messagesContainerRef = ref)}>
Expand Down
8 changes: 4 additions & 4 deletions packages/ui-stencil/src/components/internal/orama-chat/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@

## Properties

| Property | Attribute | Description | Type | Default |
| --------------- | ------------------- | ----------- | -------- | ------------------- |
| `placeholder` | `placeholder` | | `string` | `'Ask me anything'` |
| `sourceBaseURL` | `source-base-u-r-l` | | `string` | `''` |
| Property | Attribute | Description | Type | Default |
| --------------- | ----------------- | ----------- | -------- | ------------------- |
| `placeholder` | `placeholder` | | `string` | `'Ask me anything'` |
| `sourceBaseUrl` | `source-base-url` | | `string` | `''` |


## Dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ textarea {
width: 95%;
}

&:focus {
&:focus-visible {
border-color: var(--border-color-accent, border-color('accent'));
outline: none;
}
Expand Down
15 changes: 4 additions & 11 deletions packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import '@phosphor-icons/webcomponents/dist/icons/PhArrowClockwise.mjs'
})
export class ChatBox {
@Prop() index: CloudIndexConfig
@Prop() sourceBaseURL?
@Prop() placeholder?
@Prop() sourceBaseUrl?: string
@Prop() placeholder?: string

@Watch('cloudIndex')
indexChanged() {
Expand All @@ -35,16 +35,9 @@ export class ChatBox {
}

return (
// TODO: only dark theme supported to start
// * Note: only dark theme supported at the moment
<Host id="orama-ui-chatbox" class="theme-dark">
{/* TODO: Maybe inside chat instead? */}
<div class={{ header: true, hidden: chatContext.interactions?.length === 0 }}>
{/* TODO: Maybe should be a orama-button variant? */}
<button type="button" onClick={() => chatContext.chatService.resetChat()}>
<ph-arrow-clockwise weight="fill" size="14" /> Clear chat
</button>
</div>
<orama-chat placeholder={this.placeholder} sourceBaseURL={this.sourceBaseURL} />
<orama-chat placeholder={this.placeholder} sourceBaseUrl={this.sourceBaseUrl} />
</Host>
)
}
Expand Down
10 changes: 5 additions & 5 deletions packages/ui-stencil/src/components/orama-chat-box/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@

## Properties

| Property | Attribute | Description | Type | Default |
| --------------- | ------------------- | ----------- | ---------------------------------------- | ----------- |
| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` |
| `placeholder` | `placeholder` | | `any` | `undefined` |
| `sourceBaseURL` | `source-base-u-r-l` | | `any` | `undefined` |
| Property | Attribute | Description | Type | Default |
| --------------- | ----------------- | ----------- | ---------------------------------------- | ----------- |
| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` |
| `placeholder` | `placeholder` | | `string` | `undefined` |
| `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` |


## Dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-stencil/src/components/orama-search-box/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` |
| `facetProperty` | `facet-property` | | `string` | `undefined` |
| `open` | `open` | | `boolean` | `false` |
| `resultMap` | -- | | `{ section?: string; title?: string; path?: string; description?: string; }` | `{}` |
| `resultMap` | -- | | `{ title?: string; description?: string; path?: string; section?: string; }` | `{}` |
| `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ light: { '--text-color-primary': string; '--text-color-secondary': string; '--text-color-teriary': string; '--text-color-inactive': string; '--background-color-primary': string; '--background-color-secondary': string; '--background-color-tertiary': string; '--background-color-fourth': string; '--border-color-primary': string; '--border-color-secondary': string; '--border-color-inactive': string; '--icon-color-primary': string; '--icon-color-secondary': string; '--icon-color-tertiary': string; '--icon-color-inactive': string; '--icon-color-accent': string; }; dark: { '--text-color-primary': string; '--text-color-secondary': string; '--text-color-teriary': string; '--text-color-inactive': string; '--background-color-primary': string; '--background-color-secondary': string; '--background-color-tertiary': string; '--background-color-fourth': string; '--border-color-primary': string; '--border-color-secondary': string; '--border-color-inactive': string; '--icon-color-primary': string; '--icon-color-secondary': string; '--icon-color-tertiary': string; '--icon-color-inactive': string; '--icon-color-accent': string; }; system: {}; }>; }` | `undefined` |


Expand Down

0 comments on commit 2cf569a

Please sign in to comment.