feat: Creates component to display conversation search results (#6575)

* feat: Creates component to display conversation search results

* Fixes minor bugs

app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue

@@ -0,0 +1,136 @@
+<template>
+  <router-link :to="navigateTo" class="conversation-item">
+    <div class="icon-wrap">
+      <fluent-icon icon="chat-multiple" :size="14" />
+    </div>
+    <div class="conversation-details">
+      <div class="meta-wrap">
+        <div class="flex-container ">
+          <woot-label
+            class="conversation-id"
+            :title="`#${id}`"
+            :show-close="false"
+            small
+          />
+          <div class="inbox-name-wrap">
+            <inbox-name :inbox="inbox" class="margin-right-1" />
+          </div>
+        </div>
+        <div>
+          <span>{{ createdAtTime }}</span>
+        </div>
+      </div>
+      <h5 class="text-block-title name">
+        <span class="pre-text">from:</span>
+        {{ name }}
+      </h5>
+      <slot />
+    </div>
+  </router-link>
+</template>
+
+<script>
+import { frontendURL } from 'dashboard/helper/URLHelper.js';
+import timeMixin from 'dashboard/mixins/time';
+import InboxName from 'dashboard/components/widgets/InboxName.vue';
+
+export default {
+  components: {
+    InboxName,
+  },
+  mixins: [timeMixin],
+  props: {
+    id: {
+      type: String,
+      default: '',
+    },
+    email: {
+      type: String,
+      default: '',
+    },
+    inbox: {
+      type: Object,
+      default: () => ({}),
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    thumbnail: {
+      type: String,
+      default: '',
+    },
+    accountId: {
+      type: String,
+      default: '',
+    },
+    createdAt: {
+      type: [String, Date, Number],
+      default: '',
+    },
+  },
+  computed: {
+    navigateTo() {
+      return frontendURL(`accounts/${this.accountId}/conversations/${this.id}`);
+    },
+    createdAtTime() {
+      return this.dynamicTime(this.createdAt);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.conversation-item {
+  cursor: pointer;
+  display: flex;
+  padding: var(--space-small);
+  border-radius: var(--border-radius-small);
+
+  &:hover {
+    background-color: var(--s-25);
+  }
+}
+
+.meta-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-smaller);
+}
+.icon-wrap {
+  width: var(--space-medium);
+  height: var(--space-medium);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--w-600);
+  border-radius: var(--border-radius-small);
+  background-color: var(--w-75);
+}
+
+.inbox-name-wrap {
+  background-color: var(--s-25);
+  height: var(--space-two);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--border-radius-small);
+  width: fit-content;
+  margin-left: var(--space-smaller);
+}
+.conversation-details {
+  margin-left: var(--space-normal);
+  flex-grow: 1;
+}
+.conversation-id,
+.name {
+  margin: 0;
+}
+
+.pre-text {
+  color: var(--s-600);
+  font-size: var(--font-size-mini);
+  font-weight: var(--font-weight-normal);
+}
+</style>

app/javascript/dashboard/modules/search/stories/SearchResultConversationItem.stories.js

@@ -0,0 +1,50 @@
+import SearchResultConversationItem from '../components/SearchResultConversationItem.vue';
+
+export default {
+  title: 'Components/Search/SearchResultConversationItem',
+  component: SearchResultConversationItem,
+  argTypes: {
+    id: {
+      defaultValue: '123',
+      control: {
+        type: 'text',
+      },
+    },
+    name: {
+      defaultValue: 'John Doe',
+      control: {
+        type: 'text',
+      },
+    },
+    inbox: {
+      defaultValue: {
+        name: 'Livechat',
+        channel_type: 'Channel::WebWidget',
+      },
+      control: {
+        type: 'object',
+      },
+    },
+    accountId: {
+      defaultValue: '7890',
+      control: {
+        type: 'text',
+      },
+    },
+    createdAt: {
+      defaultValue: '1677672962',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { SearchResultConversationItem },
+  template:
+    '<search-result-conversation-item v-bind="$props"></search-result-conversation-item>',
+});
+
+export const ResultConversationItem = Template.bind({});